import { useForm } from '@inertiajs/react';
import { useRef, useState } from 'react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';

interface FormShape {
    std_subject: string;
    std_heading: string;
    std_body: string;
    std_image_url: string;
    inv_subject: string;
    inv_heading: string;
    inv_body: string;
    inv_image_url: string;
    inv_btn_text: string;
}

interface IncomingTemplate {
    std_subject: string | null;
    std_heading: string | null;
    std_body: string | null;
    std_image_url: string | null;
    inv_subject: string | null;
    inv_heading: string | null;
    inv_body: string | null;
    inv_image_url: string | null;
    inv_btn_text: string | null;
}

interface Props {
    wedding: { id: string; partner_a_name: string; partner_b_name: string; wedding_date?: string };
    template: IncomingTemplate;
}

type TabKey = 'std' | 'inv';

export default function EmailTemplateEditor({ wedding, template }: Props) {
    const t = useTranslator();
    const { data, setData, put, processing } = useForm<FormShape>({
        std_subject:   template.std_subject   ?? '',
        std_heading:   template.std_heading   ?? '',
        std_body:      template.std_body      ?? '',
        std_image_url: template.std_image_url ?? '',
        inv_subject:   template.inv_subject   ?? '',
        inv_heading:   template.inv_heading   ?? '',
        inv_body:      template.inv_body      ?? '',
        inv_image_url: template.inv_image_url ?? '',
        inv_btn_text:  template.inv_btn_text  ?? '',
    });

    const [tab, setTab] = useState<TabKey>('std');
    const [uploading, setUploading] = useState(false);
    const fileRef = useRef<HTMLInputElement>(null);

    const coupleNames = `${wedding.partner_a_name} & ${wedding.partner_b_name}`;
    const dateStr = wedding.wedding_date
        ? new Date(wedding.wedding_date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
        : 'Date TBD';

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        put(`/weddings/${wedding.id}/email-template`, { preserveScroll: true });
    }

    async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
        const file = e.target.files?.[0];
        if (!file) return;
        setUploading(true);
        try {
            const fd = new FormData();
            fd.append('image', file);
            const res = await fetch(`/weddings/${wedding.id}/email-template/upload`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': (document.querySelector('meta[name=csrf-token]') as HTMLMetaElement)?.content ?? '' },
                body: fd,
            });
            const json = await res.json();
            const field: keyof FormShape = tab === 'std' ? 'std_image_url' : 'inv_image_url';
            if (json.url) setData(field, json.url);
        } finally {
            setUploading(false);
            if (fileRef.current) fileRef.current.value = '';
        }
    }

    // Pull active-tab fields.
    const activeSubject = tab === 'std' ? data.std_subject : data.inv_subject;
    const activeHeading = tab === 'std' ? data.std_heading : data.inv_heading;
    const activeBody    = tab === 'std' ? data.std_body    : data.inv_body;
    const activeImage   = tab === 'std' ? data.std_image_url : data.inv_image_url;

    const stdDefaults = {
        subject: `Save the Date — ${coupleNames}`,
        heading: 'Save the Date',
        body: `We're getting married! Please save the date for our wedding on ${dateStr}. Formal invitation to follow.`,
    };
    const invDefaults = {
        subject: `You're Invited — ${coupleNames}`,
        heading: "You're Invited",
        body: `Please join us as we celebrate our wedding on ${dateStr}. We hope you can be there to share the day with us.`,
        btn: 'RSVP Now',
    };

    function setActive(field: 'subject' | 'heading' | 'body', value: string) {
        const prefix = tab === 'std' ? 'std' : 'inv';
        const key = `${prefix}_${field}` as keyof FormShape;
        setData(key, value);
    }

    function clearImage() {
        const field: keyof FormShape = tab === 'std' ? 'std_image_url' : 'inv_image_url';
        setData(field, '');
    }

    return (
        <AppLayout wedding={wedding as any}>
            <div className="max-w-6xl mx-auto px-4 sm:px-6 py-10">
                <div className="mb-10">
                    <p className="text-[11px] font-medium tracking-[0.22em] uppercase text-primary mb-2">
                        Email templates
                    </p>
                    <h1 className="font-serif text-[2.2rem] sm:text-[2.6rem] tracking-[-0.022em] leading-[1.05]">
                        Customise your <em className="italic text-primary">guest emails</em>.
                    </h1>
                    <p className="text-[14.5px] text-muted-foreground mt-2 max-w-xl leading-[1.6]">
                        Override the default save-the-date and invitation copy. Empty fields fall back to a sensible default at send time.
                    </p>
                </div>

                {/* Tabs */}
                <div className="flex border-b border-border mb-8">
                    {([
                        { key: 'std' as TabKey, label: 'Save the date' },
                        { key: 'inv' as TabKey, label: 'Invitation' },
                    ]).map((t) => {
                        const active = tab === t.key;
                        return (
                            <button
                                key={t.key}
                                onClick={() => setTab(t.key)}
                                className={`relative px-5 py-3 text-[13.5px] font-medium tracking-tight transition-colors ${
                                    active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'
                                }`}
                            >
                                {t.label}
                                {active && (
                                    <span className="absolute bottom-[-1px] left-0 right-0 h-[2px] bg-foreground" />
                                )}
                            </button>
                        );
                    })}
                </div>

                <div className="grid lg:grid-cols-[1fr_1.05fr] gap-10">
                    {/* ── Form ─────────────────────────────────────────────────── */}
                    <form onSubmit={handleSubmit} className="space-y-6">
                        <div>
                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                Subject line
                            </label>
                            <input
                                type="text"
                                value={activeSubject ?? ''}
                                onChange={(e) => setActive('subject', e.target.value)}
                                className="input"
                                placeholder={tab === 'std' ? stdDefaults.subject : invDefaults.subject}
                            />
                        </div>

                        <div>
                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                Heading
                            </label>
                            <input
                                type="text"
                                value={activeHeading ?? ''}
                                onChange={(e) => setActive('heading', e.target.value)}
                                className="input"
                                placeholder={tab === 'std' ? stdDefaults.heading : invDefaults.heading}
                            />
                        </div>

                        <div>
                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                Body
                            </label>
                            <textarea
                                rows={5}
                                value={activeBody ?? ''}
                                onChange={(e) => setActive('body', e.target.value)}
                                className="input"
                                placeholder={tab === 'std' ? stdDefaults.body : invDefaults.body}
                            />
                        </div>

                        <div>
                            <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                Header image
                            </label>
                            {activeImage ? (
                                <div className="relative w-full aspect-[16/9] rounded-xl overflow-hidden border border-border mb-2">
                                    <img src={activeImage} alt="" className="absolute inset-0 w-full h-full object-cover" />
                                    <button
                                        type="button"
                                        onClick={clearImage}
                                        className="absolute top-2 right-2 bg-foreground/85 text-background text-[11px] font-medium px-2.5 py-1 rounded-full hover:bg-foreground transition-colors"
                                    >
                                        Remove
                                    </button>
                                </div>
                            ) : null}
                            <input
                                ref={fileRef}
                                type="file"
                                accept="image/*"
                                onChange={handleUpload}
                                disabled={uploading}
                                className="w-full text-[13.5px] file:mr-3 file:px-3 file:py-2 file:rounded-lg file:border file:border-border file:bg-card file:text-foreground file:text-[12.5px] file:cursor-pointer file:hover:bg-foreground/[0.04]"
                            />
                            {uploading && <p className="text-[11px] text-muted-foreground mt-1.5">{t('common.uploading')}</p>}
                        </div>

                        {tab === 'inv' && (
                            <div>
                                <label className="block text-[12px] font-medium text-muted-foreground mb-1.5">
                                    RSVP button text
                                </label>
                                <input
                                    type="text"
                                    value={data.inv_btn_text ?? ''}
                                    onChange={(e) => setData('inv_btn_text', e.target.value)}
                                    className="input"
                                    placeholder={invDefaults.btn}
                                />
                            </div>
                        )}

                        <div className="pt-4">
                            <button type="submit" disabled={processing} className="btn-charcoal w-full sm:w-auto">
                                {processing ? 'Saving…' : 'Save template'}
                            </button>
                        </div>
                    </form>

                    {/* ── Live preview ─────────────────────────────────────────── */}
                    <div className="lg:sticky lg:top-6 self-start">
                        <div className="flex items-baseline justify-between mb-3">
                            <p className="text-[11px] font-medium tracking-[0.22em] uppercase text-primary">
                                Live preview
                            </p>
                            <p className="text-[11px] text-muted-foreground tracking-wide">
                                {tab === 'std' ? 'Save the date' : 'Invitation'}
                            </p>
                        </div>
                        <EmailPreview
                            subject={activeSubject || (tab === 'std' ? stdDefaults.subject : invDefaults.subject)}
                            heading={activeHeading || (tab === 'std' ? stdDefaults.heading : invDefaults.heading)}
                            body={activeBody || (tab === 'std' ? stdDefaults.body : invDefaults.body)}
                            imageUrl={activeImage}
                            buttonText={tab === 'inv' ? (data.inv_btn_text || invDefaults.btn) : null}
                            coupleNames={coupleNames}
                            dateStr={dateStr}
                        />
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}

function EmailPreview({
    subject,
    heading,
    body,
    imageUrl,
    buttonText,
    coupleNames,
    dateStr,
}: {
    subject: string;
    heading: string;
    body: string;
    imageUrl: string;
    buttonText: string | null;
    coupleNames: string;
    dateStr: string;
}) {
    const t = useTranslator();
    return (
        <div className="rounded-2xl border border-border overflow-hidden">
            {/* Mail-client chrome */}
            <div className="bg-muted/40 border-b border-border px-4 py-3 flex items-center gap-3">
                <div className="flex gap-1.5">
                    <span className="w-2.5 h-2.5 rounded-full bg-foreground/15" />
                    <span className="w-2.5 h-2.5 rounded-full bg-foreground/15" />
                    <span className="w-2.5 h-2.5 rounded-full bg-foreground/15" />
                </div>
                <p className="text-[11.5px] text-muted-foreground truncate">
                    <span className="text-foreground/85">{t('email.from')}</span> {coupleNames}
                </p>
            </div>

            {/* Subject line */}
            <div className="bg-card border-b border-border px-5 py-3">
                <p className="text-[10px] tracking-[0.22em] uppercase text-muted-foreground mb-1">{t('email.subject')}</p>
                <p className="font-medium text-[14px] text-foreground truncate">{subject}</p>
            </div>

            {/* Body — mirrors the on-page email layout */}
            <div className="bg-[#faf6f1]">
                {imageUrl && (
                    <div className="w-full aspect-[16/8] overflow-hidden">
                        <img src={imageUrl} alt="" className="w-full h-full object-cover" />
                    </div>
                )}
                <div className="px-6 sm:px-10 py-8 text-center" style={{ fontFamily: "var(--font-sans), Inter, system-ui, sans-serif" }}>
                    <h2
                        className="text-[1.8rem] sm:text-[2rem] tracking-[-0.022em] leading-[1.05] mb-2 text-[#1a0a0e]"
                        style={{ fontFamily: "var(--font-serif), 'Playfair Display', Georgia, serif" }}
                    >
                        {heading}
                    </h2>
                    <p
                        className="text-[12px] tracking-[0.22em] uppercase text-[#8a5060] mb-5"
                        style={{ fontStyle: 'italic' }}
                    >
                        {coupleNames} · {dateStr}
                    </p>
                    <p className="text-[14.5px] text-[#1a0a0e]/85 leading-[1.7] max-w-md mx-auto whitespace-pre-line">
                        {body}
                    </p>

                    {buttonText && (
                        <div className="mt-7">
                            <span className="inline-block bg-[#d06070] text-white px-7 py-3 rounded-xl text-[13.5px] font-medium tracking-tight">
                                {buttonText}
                            </span>
                        </div>
                    )}

                    <div className="mt-9 pt-5 border-t border-[#fcd6de]">
                        <p className="text-[11px] text-[#8a5060] tracking-wide">
                            Powered by <span style={{ fontStyle: 'italic', fontFamily: "var(--font-serif), 'Playfair Display', Georgia, serif" }}>WedFlow</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    );
}