import { router } from '@inertiajs/react';
import { useState } from 'react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';
import { ExportMenu } from '@/components/export-menu';

interface Member {
    id: string;
    name: string;
    phone: string;
}

interface Team {
    id: string;
    name: string;
    tasks: string[];
    default_key?: string | null;
    members: Member[];
}

interface Props {
    wedding: any;
    teams: Team[];
}

export default function Crew({ wedding, teams }: Props) {
    const t = useTranslator();
    const [addingTeam, setAddingTeam] = useState(false);
    const [newTeamName, setNewTeamName] = useState('');

    const totalMembers = teams.reduce((s, t) => s + t.members.length, 0);

    function addTeam() {
        if (!newTeamName.trim()) return;
        router.post(`/weddings/${wedding.id}/crew/teams`,
            { name: newTeamName.trim(), tasks: [] },
            { preserveScroll: true, onSuccess: () => { setNewTeamName(''); setAddingTeam(false); } });
    }

    return (
        <AppLayout wedding={wedding}>
            <div className="max-w-5xl mx-auto px-6 py-8">
                <div className="mb-8 flex items-start justify-between gap-4">
                    <div>
                        <h1 className="font-serif text-3xl mb-1">{t('crew.title')}</h1>
                        <p className="text-sm text-muted-foreground">
                            {teams.length} {teams.length === 1 ? 'team' : 'teams'} · {totalMembers} {totalMembers === 1 ? 'helper' : 'helpers'}
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <ExportMenu
                            filename="crew"
                            title={t('crew.title')}
                            rows={teams.flatMap((team) => team.members.map((m) => ({ team: team.name, name: m.name, phone: m.phone })))}
                            columns={[
                                { header: t('crew.team'), value: (r: any) => r.team },
                                { header: t('crew.member_name'), value: (r: any) => r.name },
                                { header: t('common.phone'), value: (r: any) => r.phone },
                            ]}
                        />
                        <button
                            onClick={() => window.print()}
                            className="text-sm px-3 py-1.5 rounded-lg border border-border hover:bg-muted whitespace-nowrap"
                        >{t('crew.print_list')}</button>
                        <button
                            onClick={() => setAddingTeam(true)}
                            className="text-sm px-3 py-1.5 rounded-lg bg-primary text-primary-foreground whitespace-nowrap"
                        >+ Team</button>
                    </div>
                </div>

                {addingTeam && (
                    <div className="mb-6 p-4 border border-border rounded-xl bg-card flex gap-2">
                        <input
                            autoFocus
                            value={newTeamName}
                            onChange={(e) => setNewTeamName(e.target.value)}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') addTeam();
                                if (e.key === 'Escape') { setAddingTeam(false); setNewTeamName(''); }
                            }}
                            placeholder={t('crew.team_name_placeholder')}
                            className="flex-1 px-3 py-2 rounded-lg border border-border bg-background text-sm outline-none focus:border-primary"
                        />
                        <button onClick={addTeam} className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm">{t('crew.add_team')}</button>
                        <button onClick={() => { setAddingTeam(false); setNewTeamName(''); }} className="px-3 py-2 rounded-lg border border-border text-sm">{t('common.cancel')}</button>
                    </div>
                )}

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {teams.map(team => (
                        <TeamCard key={team.id} team={team} weddingId={wedding.id} />
                    ))}
                </div>
            </div>
        </AppLayout>
    );
}

function TeamCard({ team, weddingId }: { team: Team; weddingId: string }) {
    const t = useTranslator();
    const [editName, setEditName] = useState(false);
    const [name, setName] = useState(team.name);
    const [editTasks, setEditTasks] = useState(false);
    const [tasks, setTasks] = useState<string[]>(team.tasks ?? []);
    const [newTask, setNewTask] = useState('');
    const [addingMember, setAddingMember] = useState(false);
    const [memberName, setMemberName] = useState('');
    const [memberPhone, setMemberPhone] = useState('');
    const [confirmDelete, setConfirmDelete] = useState(false);

    function saveName() {
        const trimmed = name.trim();
        if (trimmed && trimmed !== team.name) {
            router.patch(`/weddings/${weddingId}/crew/teams/${team.id}`,
                { name: trimmed, tasks: team.tasks ?? [] },
                { preserveScroll: true });
        }
        setEditName(false);
    }

    function saveTasks() {
        router.patch(`/weddings/${weddingId}/crew/teams/${team.id}`,
            { name: team.name, tasks },
            { preserveScroll: true, onSuccess: () => setEditTasks(false) });
    }

    function deleteTeam() {
        router.delete(`/weddings/${weddingId}/crew/teams/${team.id}`, { preserveScroll: true });
    }

    function addMember() {
        if (!memberName.trim()) return;
        router.post(`/weddings/${weddingId}/crew/teams/${team.id}/members`,
            { name: memberName.trim(), phone: memberPhone.trim() },
            { preserveScroll: true, onSuccess: () => {
                setMemberName(''); setMemberPhone(''); setAddingMember(false);
            } });
    }

    function deleteMember(member: Member) {
        router.delete(`/weddings/${weddingId}/crew/teams/${team.id}/members/${member.id}`, { preserveScroll: true });
    }

    return (
        <div className="border border-border rounded-xl bg-card overflow-hidden">
            <div className="px-4 py-3 border-b border-border flex items-start gap-2">
                <div className="flex-1 min-w-0">
                    {editName ? (
                        <input
                            autoFocus
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            onBlur={saveName}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') saveName();
                                if (e.key === 'Escape') { setEditName(false); setName(team.name); }
                            }}
                            className="w-full font-semibold text-sm bg-transparent border-b border-primary outline-none"
                        />
                    ) : (
                        <button
                            onClick={() => { setName(team.name); setEditName(true); }}
                            className="font-semibold text-sm text-left hover:text-primary"
                        >{team.name}</button>
                    )}
                    <p className="text-[11px] text-muted-foreground mt-0.5">
                        {team.members.length} {team.members.length === 1 ? 'member' : 'members'}
                    </p>
                </div>
                {confirmDelete ? (
                    <div className="flex items-center gap-1 text-xs">
                        <span className="text-muted-foreground">{t('crew.delete_q')}</span>
                        <button onClick={deleteTeam} className="text-red-500 font-medium hover:underline">Yes</button>
                        <button onClick={() => setConfirmDelete(false)} className="text-muted-foreground hover:underline">No</button>
                    </div>
                ) : (
                    <button onClick={() => setConfirmDelete(true)} className="text-muted-foreground hover:text-red-500 text-sm">×</button>
                )}
            </div>

            {/* Tasks */}
            <div className="px-4 py-3 border-b border-border">
                <div className="flex items-center justify-between mb-2">
                    <h4 className="text-xs uppercase tracking-wide text-muted-foreground">{t('crew.responsibilities')}</h4>
                    {!editTasks && (
                        <button onClick={() => { setTasks(team.tasks ?? []); setEditTasks(true); }} className="text-xs text-primary hover:underline">{t('common.edit')}</button>
                    )}
                </div>
                {editTasks ? (
                    <div className="space-y-2">
                        {tasks.map((t, i) => (
                            <div key={i} className="flex items-center gap-2 text-sm">
                                <span className="flex-1">{t}</span>
                                <button onClick={() => setTasks(tasks.filter((_, j) => j !== i))} className="text-red-500 text-xs">×</button>
                            </div>
                        ))}
                        <div className="flex gap-2">
                            <input
                                value={newTask}
                                onChange={(e) => setNewTask(e.target.value)}
                                placeholder={t('crew.new_responsibility')}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter' && newTask.trim()) { setTasks([...tasks, newTask.trim()]); setNewTask(''); }
                                }}
                                className="flex-1 px-2 py-1 text-sm rounded border border-border bg-background outline-none focus:border-primary"
                            />
                            <button
                                onClick={() => { if (newTask.trim()) { setTasks([...tasks, newTask.trim()]); setNewTask(''); } }}
                                className="px-2 py-1 text-xs rounded border border-border"
                            >+</button>
                        </div>
                        <div className="flex gap-2 pt-1">
                            <button onClick={saveTasks} className="text-xs px-3 py-1 rounded bg-primary text-primary-foreground">{t('common.save')}</button>
                            <button onClick={() => setEditTasks(false)} className="text-xs px-3 py-1 rounded border border-border">{t('common.cancel')}</button>
                        </div>
                    </div>
                ) : (team.tasks ?? []).length === 0 ? (
                    <p className="text-xs italic text-muted-foreground">{t('crew.no_responsibilities')}</p>
                ) : (
                    <ul className="space-y-1">
                        {team.tasks.map((t, i) => (
                            <li key={i} className="flex items-start gap-2 text-sm">
                                <span className="mt-1.5 h-1.5 w-1.5 rounded-full bg-primary flex-shrink-0" />
                                <span>{t}</span>
                            </li>
                        ))}
                    </ul>
                )}
            </div>

            {/* Members */}
            <div className="px-4 py-3">
                <div className="flex items-center justify-between mb-2">
                    <h4 className="text-xs uppercase tracking-wide text-muted-foreground">{t('crew.members')}</h4>
                    {!addingMember && (
                        <button onClick={() => setAddingMember(true)} className="text-xs text-primary hover:underline">+ Add</button>
                    )}
                </div>
                <div className="space-y-1">
                    {team.members.map(m => (
                        <div key={m.id} className="group flex items-center gap-2 py-1">
                            <div className="h-6 w-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                                <span className="text-[10px] font-medium text-primary">{m.name.charAt(0).toUpperCase()}</span>
                            </div>
                            <div className="flex-1 min-w-0">
                                <p className="text-sm truncate">{m.name}</p>
                                {m.phone && <p className="text-[11px] text-muted-foreground">{m.phone}</p>}
                            </div>
                            <button onClick={() => deleteMember(m)} className="text-red-500 hover:text-red-700 text-xs opacity-0 group-hover:opacity-100">×</button>
                        </div>
                    ))}
                </div>
                {addingMember && (
                    <div className="mt-2 space-y-2">
                        <input
                            autoFocus
                            value={memberName}
                            onChange={(e) => setMemberName(e.target.value)}
                            placeholder={t('crew.member_name')}
                            className="w-full px-2 py-1 text-sm rounded border border-border bg-background outline-none focus:border-primary"
                        />
                        <input
                            value={memberPhone}
                            onChange={(e) => setMemberPhone(e.target.value)}
                            placeholder={t('crew.phone_optional')}
                            className="w-full px-2 py-1 text-sm rounded border border-border bg-background outline-none focus:border-primary"
                        />
                        <div className="flex gap-2">
                            <button onClick={addMember} className="text-xs px-3 py-1 rounded bg-primary text-primary-foreground">Add</button>
                            <button onClick={() => { setAddingMember(false); setMemberName(''); setMemberPhone(''); }} className="text-xs px-3 py-1 rounded border border-border">{t('common.cancel')}</button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}