'use client';

import { useState, type FormEvent } from 'react';
import Link from 'next/link';
import { Mail, MapPin, Phone, Send, Users } from 'lucide-react';
import { BrowsePageHero } from '@/components/layout/BrowsePageHero';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useLanguage } from '@/contexts/LanguageContext';

const SUPPORT_EMAIL = 'support@ehandyhire.com';
const SUPPORT_PHONE = '+63 917 123 4567';
const SUPPORT_LOCATION = 'Davao City, Philippines';

export default function ContactPage() {
  const { t } = useLanguage();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Contact from ${name.trim() || 'eHandyHire visitor'}`);
    const body = encodeURIComponent(
      `Name: ${name.trim()}\nEmail: ${email.trim()}\n\n${message.trim()}`
    );
    window.location.href = `mailto:${SUPPORT_EMAIL}?subject=${subject}&body=${body}`;
  };

  return (
    <div className="workers-directory">
      <BrowsePageHero
        variant="directory"
        eyebrow={t('Support', 'Suporta')}
        title={t('Contact Us', 'Makipag-ugnayan')}
        description={t(
          'Questions about the directory, your account, or listing as a worker? Send us a message.',
          'May tanong tungkol sa directory, account, o pag-list bilang worker? Magpadala ng mensahe.'
        )}
        actions={[
          {
            href: '/workers',
            label: t('Find workers', 'Hanapin ang workers'),
            icon: Users,
            variant: 'accent',
          },
        ]}
      />

      <div className="page-container max-w-5xl">
        <div className="grid gap-8 lg:grid-cols-[1fr_1.15fr] lg:gap-10">
          <aside className="space-y-4">
            <p className="text-sm text-muted leading-relaxed">
              {t(
                'We usually reply within 1–2 business days. For urgent safety concerns, email us directly.',
                'Karaniwang sumasagot kami sa loob ng 1–2 business days. Para sa urgent safety concerns, i-email kami direkta.'
              )}
            </p>

            <div className="border border-[#e2ddd2] bg-[#fffdf9]">
              <a
                href={`mailto:${SUPPORT_EMAIL}`}
                className="flex items-start gap-3 border-b border-[#e2ddd2] p-4 transition-colors hover:bg-white"
              >
                <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
                  <Mail className="h-4 w-4" />
                </span>
                <span className="min-w-0">
                  <span className="block text-xs font-semibold uppercase tracking-wide text-slate-500">
                    {t('Email', 'Email')}
                  </span>
                  <span className="mt-0.5 block text-sm font-semibold text-slate-900 break-all">
                    {SUPPORT_EMAIL}
                  </span>
                </span>
              </a>

              <a
                href={`tel:${SUPPORT_PHONE.replace(/\s/g, '')}`}
                className="flex items-start gap-3 border-b border-[#e2ddd2] p-4 transition-colors hover:bg-white"
              >
                <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
                  <Phone className="h-4 w-4" />
                </span>
                <span className="min-w-0">
                  <span className="block text-xs font-semibold uppercase tracking-wide text-slate-500">
                    {t('Phone', 'Telepono')}
                  </span>
                  <span className="mt-0.5 block text-sm font-semibold text-slate-900">
                    {SUPPORT_PHONE}
                  </span>
                </span>
              </a>

              <div className="flex items-start gap-3 p-4">
                <span className="flex h-10 w-10 shrink-0 items-center justify-center bg-[var(--home-ink)] text-white">
                  <MapPin className="h-4 w-4" />
                </span>
                <span className="min-w-0">
                  <span className="block text-xs font-semibold uppercase tracking-wide text-slate-500">
                    {t('Location', 'Lokasyon')}
                  </span>
                  <span className="mt-0.5 block text-sm font-semibold text-slate-900">
                    {SUPPORT_LOCATION}
                  </span>
                </span>
              </div>
            </div>

            <p className="text-xs text-muted leading-relaxed">
              {t(
                'Workers on eHandyHire are independent and not employed by us.',
                'Ang mga worker sa eHandyHire ay independent at hindi empleyado namin.'
              )}{' '}
              <Link
                href="/disclaimer"
                className="font-semibold text-[var(--home-amber)] hover:text-[var(--home-amber-soft)]"
              >
                {t('Read disclaimer', 'Basahin ang disclaimer')}
              </Link>
            </p>
          </aside>

          <form
            onSubmit={handleSubmit}
            className="border border-[#e2ddd2] bg-[#fffdf9] p-5 sm:p-6 space-y-4"
          >
            <div>
              <h2 className="home-display text-lg font-bold text-slate-900">
                {t('Send a message', 'Magpadala ng mensahe')}
              </h2>
              <p className="mt-1 text-sm text-muted">
                {t(
                  'Opens your email app with your message ready to send.',
                  'Bubuksan ang email app mo na handa na ang mensahe.'
                )}
              </p>
            </div>

            <Input
              label={t('Name', 'Pangalan')}
              name="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              autoComplete="name"
              className="rounded-none"
            />
            <Input
              label={t('Email', 'Email')}
              name="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              className="rounded-none"
            />
            <div className="space-y-1.5">
              <label htmlFor="contact-message" className="block text-sm font-medium text-slate-700">
                {t('Message', 'Mensahe')}
              </label>
              <textarea
                id="contact-message"
                name="message"
                rows={5}
                required
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                className="search-input min-h-[8rem] rounded-none py-3"
                placeholder={t(
                  'How can we help?',
                  'Paano kami makakatulong?'
                )}
              />
            </div>

            <Button type="submit" className="w-full worker-cta-amber rounded-none gap-2">
              <Send className="h-4 w-4" />
              {t('Send Message', 'Ipadala ang Mensahe')}
            </Button>
          </form>
        </div>
      </div>
    </div>
  );
}