'use client';

import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import Link from 'next/link';
import Header from './Header';
import Footer from './Footer';
import { Button } from './ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Badge } from './ui/badge';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from './ui/select';
import {
    Phone,
    Mail,
    MapPin,
    Clock,
    MessageCircle,
    Send,
    CheckCircle,
    AlertCircle,
    ExternalLink,
    Building
} from 'lucide-react';
import { contactConfig } from '../../lib/useContact';

interface ContactPageClientProps {
  locale: string;
}

export default function ContactPageClient({ locale }: ContactPageClientProps) {
    const { t: tContact } = useTranslation('contact');
    const { t: tCommon } = useTranslation('common');
    const [language, setLanguage] = useState(locale);
    const [mounted, setMounted] = useState(false);
    
    // 表单状态
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: '',
        company: '',
        subject: '',
        message: ''
    });
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');

    useEffect(() => {
        setMounted(true);
        setLanguage(locale);
    }, [locale]);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSelectChange = (value: string) => {
        setFormData(prev => ({ ...prev, subject: value }));
    };

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setIsSubmitting(true);
        setSubmitStatus('idle');

        try {
            const response = await fetch('https://formspree.io/f/mldbwvwo', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    ...formData,
                    language: locale,
                    source: 'contact_page',
                }),
            });

            if (response.ok) {
                setSubmitStatus('success');
                setFormData({
                    name: '',
                    email: '',
                    phone: '',
                    company: '',
                    subject: '',
                    message: ''
                });
                setTimeout(() => setSubmitStatus('idle'), 5000);
            } else {
                setSubmitStatus('error');
            }
        } catch (error) {
            console.error('Form submission error:', error);
            setSubmitStatus('error');
        } finally {
            setIsSubmitting(false);
        }
    };

    if (!mounted) {
        return (
            <div className="min-h-screen bg-gray-50">
                <div className="flex items-center justify-center h-96">
                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-50">
            <Header
                language={language}
                setLanguage={setLanguage}
                translations={tCommon}
                locale={locale}
            />

            {/* Hero Section */}
            <section className="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800 text-white py-16 lg:py-24">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto text-center">
                        <h1 className="text-4xl lg:text-6xl font-bold mb-6">
                            {tContact('contact.title')}
                        </h1>
                        <p className="text-xl lg:text-2xl text-blue-100 mb-4">
                            {tContact('contact.subtitle')}
                        </p>
                        <p className="text-lg text-blue-200 max-w-3xl mx-auto">
                            {tContact('contact.description')}
                        </p>
                    </div>
                </div>
            </section>

            {/* Quick Contact Bar */}
            <section className="bg-white shadow-sm border-b">
                <div className="container mx-auto px-4 py-6">
                    <div className="flex flex-wrap justify-center gap-4 lg:gap-8">
                        <a
                            href={contactConfig.telegram}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center gap-2 px-4 py-2 text-blue-500 hover:bg-blue-50 rounded-lg transition-colors"
                        >
                            <Send size={20} />
                            <span className="font-medium">{tContact('contact.quickContact.telegram')}</span>
                        </a>
                        <a
                            href={contactConfig.whatsapp}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="flex items-center gap-2 px-4 py-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
                        >
                            <MessageCircle size={20} />
                            <span className="font-medium">{tContact('contact.quickContact.whatsapp')}</span>
                        </a>
                        <a
                            href={contactConfig.phoneHref}
                            className="flex items-center gap-2 px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                        >
                            <Phone size={20} />
                            <span className="font-medium">{tContact('contact.quickContact.phone')}</span>
                        </a>
                        <a
                            href="mailto:service@dongyun.com"
                            className="flex items-center gap-2 px-4 py-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
                        >
                            <Mail size={20} />
                            <span className="font-medium">{tContact('contact.quickContact.email')}</span>
                        </a>
                    </div>
                </div>
            </section>

            {/* Main Content */}
            <section className="py-16">
                <div className="container mx-auto px-4">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        
                        {/* Contact Form */}
                        <div className="lg:col-span-2">
                            <Card className="shadow-lg">
                                <CardHeader className="pb-8">
                                    <CardTitle className="text-2xl text-gray-900">
                                        {tContact('contact.form.title')}
                                    </CardTitle>
                                    <CardDescription className="text-lg">
                                        {tContact('contact.form.subtitle')}
                                    </CardDescription>
                                </CardHeader>
                                <CardContent>
                                    <form onSubmit={handleSubmit} className="space-y-6">
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div className="space-y-2">
                                                <Label htmlFor="name">{tContact('contact.form.name')} *</Label>
                                                <Input
                                                    id="name"
                                                    name="name"
                                                    type="text"
                                                    value={formData.name}
                                                    onChange={handleInputChange}
                                                    placeholder={tContact('contact.form.namePlaceholder')}
                                                    required
                                                    className="h-12"
                                                />
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="email">{tContact('contact.form.email')} *</Label>
                                                <Input
                                                    id="email"
                                                    name="email"
                                                    type="email"
                                                    value={formData.email}
                                                    onChange={handleInputChange}
                                                    placeholder={tContact('contact.form.emailPlaceholder')}
                                                    required
                                                    className="h-12"
                                                />
                                            </div>
                                        </div>

                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div className="space-y-2">
                                                <Label htmlFor="phone">{tContact('contact.form.phone')} *</Label>
                                                <Input
                                                    id="phone"
                                                    name="phone"
                                                    type="tel"
                                                    value={formData.phone}
                                                    onChange={handleInputChange}
                                                    placeholder={tContact('contact.form.phonePlaceholder')}
                                                    required
                                                    className="h-12"
                                                />
                                            </div>
                                            <div className="space-y-2">
                                                <Label htmlFor="company">{tContact('contact.form.company')}</Label>
                                                <Input
                                                    id="company"
                                                    name="company"
                                                    type="text"
                                                    value={formData.company}
                                                    onChange={handleInputChange}
                                                    placeholder={tContact('contact.form.companyPlaceholder')}
                                                    className="h-12"
                                                />
                                            </div>
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="subject">{tContact('contact.form.subject')} *</Label>
                                            <Select onValueChange={handleSelectChange} required>
                                                <SelectTrigger className="h-12">
                                                    <SelectValue placeholder={tContact('contact.form.subjectPlaceholder')} />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="general">{tContact('contact.subjects.general')}</SelectItem>
                                                    <SelectItem value="technical">{tContact('contact.subjects.technical')}</SelectItem>
                                                    <SelectItem value="sales">{tContact('contact.subjects.sales')}</SelectItem>
                                                    <SelectItem value="partnership">{tContact('contact.subjects.partnership')}</SelectItem>
                                                    <SelectItem value="complaint">{tContact('contact.subjects.complaint')}</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>

                                        <div className="space-y-2">
                                            <Label htmlFor="message">{tContact('contact.form.message')} *</Label>
                                            <Textarea
                                                id="message"
                                                name="message"
                                                value={formData.message}
                                                onChange={handleInputChange}
                                                placeholder={tContact('contact.form.messagePlaceholder')}
                                                required
                                                rows={6}
                                                className="resize-none"
                                            />
                                        </div>

                                        {/* Submit Status */}
                                        {submitStatus === 'success' && (
                                            <div className="flex items-center gap-2 p-4 bg-green-50 text-green-800 rounded-lg">
                                                <CheckCircle size={20} />
                                                <span>{tContact('contact.form.success')}</span>
                                            </div>
                                        )}

                                        {submitStatus === 'error' && (
                                            <div className="flex items-center gap-2 p-4 bg-red-50 text-red-800 rounded-lg">
                                                <AlertCircle size={20} />
                                                <span>{tContact('contact.form.error')}</span>
                                            </div>
                                        )}

                                        <Button
                                            type="submit"
                                            disabled={isSubmitting}
                                            className="w-full h-12 text-lg"
                                        >
                                            {isSubmitting ? (
                                                <div className="flex items-center gap-2">
                                                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                                                    {tContact('contact.form.submitting')}
                                                </div>
                                            ) : (
                                                <div className="flex items-center gap-2">
                                                    <Send size={20} />
                                                    {tContact('contact.form.submit')}
                                                </div>
                                            )}
                                        </Button>
                                    </form>
                                </CardContent>
                            </Card>
                        </div>

                        {/* Contact Information Sidebar */}
                        <div className="space-y-6">
                            {/* Company Info */}
                            <Card className="shadow-lg">
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2">
                                        <Building className="text-blue-600" size={24} />
                                        {tContact('contact.info.title')}
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="space-y-4">
                                    <div>
                                        <h4 className="font-semibold text-gray-900 mb-2">
                                            {tContact('contact.info.company')}
                                        </h4>
                                    </div>
                                    
                                    <div className="flex gap-3">
                                        <MapPin className="text-gray-500 mt-1 flex-shrink-0" size={18} />
                                        <span className="text-gray-700">
                                            {tContact('contact.info.address')}
                                        </span>
                                    </div>

                                    <div className="flex gap-3">
                                        <Mail className="text-gray-500 mt-1 flex-shrink-0" size={18} />
                                        <a 
                                            href="mailto:service@dongyun.com"
                                            className="text-blue-600 hover:underline"
                                        >
                                            {tContact('contact.info.email')}
                                        </a>
                                    </div>

                                    <div className="flex gap-3">
                                        <Phone className="text-gray-500 mt-1 flex-shrink-0" size={18} />
                                        <a 
                                            href={contactConfig.phoneHref}
                                            className="text-blue-600 hover:underline"
                                        >
                                            {tContact('contact.info.phone')}
                                        </a>
                                    </div>
                                </CardContent>
                            </Card>

                            {/* Business Hours */}
                            <Card className="shadow-lg">
                                <CardHeader>
                                    <CardTitle className="flex items-center gap-2">
                                        <Clock className="text-blue-600" size={24} />
                                        {tContact('contact.businessHours.title')}
                                    </CardTitle>
                                </CardHeader>
                                <CardContent className="space-y-3">
                                    <div className="flex justify-between">
                                        <span className="text-gray-700">{tContact('contact.businessHours.weekdays')}</span>
                                        <span className="font-medium">{tContact('contact.businessHours.weekdaysTime')}</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-gray-700">{tContact('contact.businessHours.weekends')}</span>
                                        <span className="text-sm text-gray-500">{tContact('contact.businessHours.weekendsTime')}</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-gray-700">{tContact('contact.businessHours.holidays')}</span>
                                        <span className="text-sm text-gray-500">{tContact('contact.businessHours.holidaysTime')}</span>
                                    </div>
                                    <div className="pt-3 border-t border-gray-200">
                                        <Badge variant="secondary" className="bg-green-100 text-green-800">
                                            {tContact('contact.info.emergencySupport')}
                                        </Badge>
                                    </div>
                                </CardContent>
                            </Card>
                        </div>
                    </div>
                </div>
            </section>

            {/* Map Section */}
            <section className="py-16 bg-white">
                <div className="container mx-auto px-4">
                    <div className="text-center mb-12">
                        <h2 className="text-3xl font-bold text-gray-900 mb-4">
                            {tContact('contact.locations.title')}
                        </h2>
                        <p className="text-gray-600 max-w-2xl mx-auto">
                            {tContact('contact.locations.headquarters')}
                        </p>
                    </div>
                    
                    <div className="max-w-4xl mx-auto">
                        <div className="aspect-video bg-gray-200 rounded-lg flex items-center justify-center">
                            <div className="text-center">
                                <MapPin className="text-gray-400 mx-auto mb-4" size={48} />
                                <p className="text-gray-600 mb-4">地图位置展示</p>
                                <Button variant="outline">
                                    {tContact('contact.locations.directions')}
                                    <ExternalLink className="ml-2" size={16} />
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer translations={tCommon} />
        </div>
    );
}