'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Mail, Phone, MapPin, Send, Clock, MessageCircle, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { EmptyState } from '@/components/ui/empty-state';
import { useSystemConfig } from '@/hooks/useSystemConfig';

export default function ContactPage() {
  const sysConfig = useSystemConfig();
  const [formData, setFormData] = useState({ name: '', email: '', subject: '', message: '' });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
    setFormData({ name: '', email: '', subject: '', message: '' });
  };

  return (
    <div className="bg-surface-sunken min-h-screen">
      <div className="mx-auto max-w-4xl px-4 py-12">
        <div className="text-center mb-12">
          <h1 className="text-3xl font-bold text-ink">Contact Us</h1>
          <p className="mt-3 text-ink-muted">Have questions? We are here to help.</p>
        </div>

        <div className="grid gap-6 md:grid-cols-3 mb-8">
          {[
            { icon: Mail, title: 'Email', desc: sysConfig.supportEmail },
            { icon: Phone, title: 'Phone', desc: sysConfig.supportPhone },
            { icon: Clock, title: 'Hours', desc: '24/7 Support Available' },
          ].map((item) => (
            <Card key={item.title}>
              <CardContent className="p-6 text-center">
                <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300">
                  <item.icon className="h-5 w-5" />
                </div>
                <p className="text-sm font-medium text-ink">{item.title}</p>
                <p className="text-sm text-ink-muted">{item.desc}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-6 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>Send us a message</CardTitle>
              <CardDescription className="mt-1">Fill out the form and we will get back to you</CardDescription>
            </CardHeader>
            <CardContent>
              {submitted ? (
                <div className="py-8 text-center">
                  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-300">
                    <MessageCircle className="h-6 w-6" />
                  </div>
                  <h3 className="text-lg font-semibold text-ink">Message Sent!</h3>
                  <p className="mt-1 text-sm text-ink-muted">Thank you for reaching out. We will respond within 24 hours.</p>
                  <Button className="mt-4" variant="outline" onClick={() => setSubmitted(false)}>Send Another</Button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label className="mb-1.5 block text-sm font-medium text-ink">Name</label>
                    <Input
                      placeholder="Your name"
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      required
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-sm font-medium text-ink">Email</label>
                    <Input
                      type="email"
                      placeholder="you@example.com"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      required
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-sm font-medium text-ink">Subject</label>
                    <Input
                      placeholder="How can we help?"
                      value={formData.subject}
                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                      required
                    />
                  </div>
                  <div>
                    <label className="mb-1.5 block text-sm font-medium text-ink">Message</label>
                    <textarea
                      className="input min-h-[120px] resize-y"
                      placeholder="Describe your issue or question..."
                      value={formData.message}
                      onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                      required
                    />
                  </div>
                  <Button type="submit" className="w-full">
                    <Send className="h-4 w-4 mr-2" /> Send Message
                  </Button>
                </form>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Other ways to reach us</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-ink-muted">
                For account-specific issues, please log in and create a support ticket from your dashboard for faster resolution.
              </p>
              <div className="space-y-3">
                <Link href="/dashboard/support" className="flex items-center gap-3 rounded-xl border border-line bg-surface-raised p-3 transition-colors hover:bg-surface-raised/80">
                  <MessageCircle className="h-5 w-5 text-primary-500" />
                  <div>
                    <p className="text-sm font-medium text-ink">Support Ticket</p>
                    <p className="text-xs text-ink-muted">Create a ticket for account issues</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-ink-faint ml-auto" />
                </Link>
                <Link href="/faq" className="flex items-center gap-3 rounded-xl border border-line bg-surface-raised p-3 transition-colors hover:bg-surface-raised/80">
                  <MessageCircle className="h-5 w-5 text-primary-500" />
                  <div>
                    <p className="text-sm font-medium text-ink">FAQ</p>
                    <p className="text-xs text-ink-muted">Browse frequently asked questions</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-ink-faint ml-auto" />
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}