import AdminLayout from '@/Layouts/AdminLayout';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { parseServerDate } from '@/lib/date';
import { cn } from '@/lib/utils';
import type { PageProps } from '@/types';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { format, formatDistanceToNow } from 'date-fns';
import {
    ArrowLeft,
    Building2,
    CheckCircle2,
    ChevronDown,
    Clock,
    Lock,
    MessageSquare,
    Send,
    Tag,
    User,
    XCircle,
} from 'lucide-react';
import { useState } from 'react';

// ── Types ─────────────────────────────────────────────────────────────────────

interface TicketDetail {
    id: string;
    title: string;
    category: string;
    priority: string;
    status: string;
    author_name: string | null;
    author_email: string | null;
    tenant_id: string;
    tenant_name: string;
    created_at: string;
    updated_at: string;
}

interface Reply {
    id: string;
    body: string;
    is_internal: boolean;
    is_admin: boolean;
    author_name: string;
    created_at: string;
}

// ── Badge styles ──────────────────────────────────────────────────────────────

const STATUS_STYLES: Record<string, string> = {
    open: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
    pending:
        'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
    resolved:
        'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
    closed: 'bg-muted text-muted-foreground',
};

const PRIORITY_STYLES: Record<string, string> = {
    urgent: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
    medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
    low: 'bg-muted text-muted-foreground',
};

const CATEGORY_LABELS: Record<string, string> = {
    billing: 'Billing',
    technical: 'Technical',
    onboarding: 'Onboarding',
    feature_request: 'Feature Request',
    general: 'General',
};

const STATUS_TRANSITIONS: { value: string; label: string }[] = [
    { value: 'open', label: 'Mark Open' },
    { value: 'pending', label: 'Mark Pending' },
    { value: 'resolved', label: 'Mark Resolved' },
    { value: 'closed', label: 'Close Ticket' },
];

// ── Reply bubble ──────────────────────────────────────────────────────────────

function ReplyBubble({ reply }: { reply: Reply }) {
    const isAdmin = reply.is_admin;

    return (
        <div
            className={cn(
                'flex gap-3',
                isAdmin ? 'flex-row-reverse' : 'flex-row',
            )}
        >
            {/* Avatar */}
            <div
                className={cn(
                    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold',
                    isAdmin
                        ? 'bg-primary/20 text-primary'
                        : 'bg-muted text-muted-foreground',
                )}
            >
                {reply.author_name?.[0]?.toUpperCase() ?? '?'}
            </div>

            {/* Bubble */}
            <div
                className={cn(
                    'max-w-[72%]',
                    isAdmin ? 'items-end' : 'items-start',
                    'flex flex-col gap-1',
                )}
            >
                {reply.is_internal && (
                    <span className="flex items-center gap-1 text-[10px] font-semibold text-amber-600 dark:text-amber-400">
                        <Lock className="h-3 w-3" />
                        Internal note
                    </span>
                )}
                <div
                    className={cn(
                        'rounded-2xl px-4 py-2.5 text-sm',
                        isAdmin
                            ? 'bg-primary text-primary-foreground rounded-tr-sm'
                            : reply.is_internal
                              ? 'rounded-tl-sm bg-amber-50 text-amber-900 ring-1 ring-amber-200 dark:bg-amber-950/30 dark:text-amber-200 dark:ring-amber-800'
                              : 'bg-muted text-foreground rounded-tl-sm',
                    )}
                >
                    <p className="leading-relaxed whitespace-pre-wrap">
                        {reply.body}
                    </p>
                </div>
                <p className="text-muted-foreground px-1 text-[10px]">
                    {reply.author_name} ·{' '}
                    {formatDistanceToNow(parseServerDate(reply.created_at), {
                        addSuffix: true,
                    })}
                </p>
            </div>
        </div>
    );
}

// ── Reply form ────────────────────────────────────────────────────────────────

function ReplyForm({ ticketId }: { ticketId: string }) {
    const [isInternal, setIsInternal] = useState(false);
    const { data, setData, post, processing, reset, errors } = useForm({
        body: '',
        is_internal: false as boolean,
    });

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(`/admin/support/${ticketId}/reply`, {
            onSuccess: () => reset(),
        });
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-3">
            <textarea
                value={data.body}
                onChange={(e) => setData('body', e.target.value)}
                rows={4}
                placeholder={
                    isInternal
                        ? 'Write an internal note (only admins can see this)…'
                        : 'Write a reply to the customer…'
                }
                className={cn(
                    'border-border bg-background text-foreground placeholder:text-muted-foreground w-full resize-none rounded-xl border px-4 py-3 text-sm transition-colors outline-none',
                    'focus:border-primary/50 focus:ring-primary/20 focus:ring-2',
                    isInternal &&
                        'border-amber-300 focus:border-amber-400 focus:ring-amber-200/40 dark:border-amber-700',
                    errors.body && 'border-destructive',
                )}
            />
            {errors.body && (
                <p className="text-destructive text-xs">{errors.body}</p>
            )}

            <div className="flex items-center justify-between">
                {/* Internal note toggle */}
                <button
                    type="button"
                    onClick={() => {
                        const next = !isInternal;
                        setIsInternal(next);
                        setData('is_internal', next);
                    }}
                    className={cn(
                        'flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-colors',
                        isInternal
                            ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
                            : 'text-muted-foreground hover:bg-muted',
                    )}
                >
                    <Lock className="h-3.5 w-3.5" />
                    {isInternal ? 'Internal note' : 'Make internal'}
                </button>

                <Button
                    type="submit"
                    disabled={processing || !data.body.trim()}
                    size="sm"
                    className="gap-2"
                >
                    <Send className="h-3.5 w-3.5" />
                    {isInternal ? 'Save note' : 'Send reply'}
                </Button>
            </div>
        </form>
    );
}

// ── Status changer ────────────────────────────────────────────────────────────

function StatusChanger({ ticket }: { ticket: TicketDetail }) {
    const { patch } = useForm({ status: ticket.status });

    const changeStatus = (status: string) => {
        patch(`/admin/support/${ticket.id}/status`, {
            data: { status },
        } as Parameters<typeof patch>[1]);
    };

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <button
                    className={cn(
                        'flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-colors',
                        STATUS_STYLES[ticket.status] ??
                            'bg-muted text-muted-foreground',
                    )}
                >
                    <span className="capitalize">{ticket.status}</span>
                    <ChevronDown className="h-3 w-3 opacity-70" />
                </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-40">
                {STATUS_TRANSITIONS.filter(
                    (t) => t.value !== ticket.status,
                ).map((t) => (
                    <DropdownMenuItem
                        key={t.value}
                        className="gap-2 text-xs"
                        onClick={() => changeStatus(t.value)}
                    >
                        {t.value === 'resolved' ? (
                            <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
                        ) : t.value === 'closed' ? (
                            <XCircle className="text-muted-foreground h-3.5 w-3.5" />
                        ) : (
                            <Clock className="h-3.5 w-3.5 text-amber-500" />
                        )}
                        {t.label}
                    </DropdownMenuItem>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

// ── Page ──────────────────────────────────────────────────────────────────────

interface Props {
    ticket: TicketDetail;
    replies: Reply[];
}

export default function SupportShow({ ticket, replies }: Props) {
    const {
        props: { flash },
    } = usePage<PageProps>();

    return (
        <AdminLayout
            title={`Ticket #${ticket.id}`}
            breadcrumbs={[
                { label: 'Support', href: '/admin/support' },
                { label: `#${ticket.id} — ${ticket.title}` },
            ]}
        >
            <Head title={`Ticket #${ticket.id}`} />

            <div className="p-6 lg:p-8">
                {/* Header */}
                <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <div className="flex items-start gap-3">
                        <Link
                            href="/admin/support"
                            className="text-muted-foreground hover:text-foreground mt-0.5 transition-colors"
                        >
                            <ArrowLeft className="h-4 w-4" />
                        </Link>
                        <div>
                            <h1 className="text-foreground text-xl leading-snug font-bold">
                                {ticket.title}
                            </h1>
                            <p className="text-muted-foreground mt-0.5 text-sm">
                                Ticket #{ticket.id} · opened{' '}
                                {format(
                                    parseServerDate(ticket.created_at),
                                    'dd MMM yyyy',
                                )}
                            </p>
                        </div>
                    </div>
                    <StatusChanger ticket={ticket} />
                </div>

                {flash?.success && (
                    <div className="mb-4 rounded-lg bg-emerald-50 px-4 py-2.5 text-sm text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400">
                        {flash.success}
                    </div>
                )}

                <div className="grid gap-6 lg:grid-cols-[1fr_280px]">
                    {/* ── Thread + reply ── */}
                    <div className="space-y-4">
                        {/* Replies thread */}
                        <div className="bg-card border-border rounded-xl border p-4">
                            {replies.length === 0 ? (
                                <p className="text-muted-foreground py-6 text-center text-sm">
                                    No replies yet. Be the first to respond.
                                </p>
                            ) : (
                                <div className="space-y-6">
                                    {replies.map((r) => (
                                        <ReplyBubble key={r.id} reply={r} />
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* Reply form */}
                        {ticket.status !== 'closed' && (
                            <div className="bg-card border-border rounded-xl border p-4">
                                <h3 className="text-foreground mb-3 flex items-center gap-2 text-sm font-semibold">
                                    <MessageSquare className="h-4 w-4" />
                                    Reply
                                </h3>
                                <ReplyForm ticketId={ticket.id} />
                            </div>
                        )}
                    </div>

                    {/* ── Metadata sidebar ── */}
                    <div className="space-y-4">
                        <div className="bg-card border-border rounded-xl border p-4">
                            <h3 className="text-foreground mb-4 text-sm font-semibold">
                                Ticket details
                            </h3>
                            <dl className="space-y-3">
                                <div>
                                    <dt className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                                        <Building2 className="h-3.5 w-3.5" />{' '}
                                        Tenant
                                    </dt>
                                    <dd className="mt-0.5">
                                        <Link
                                            href={`/admin/tenants/${ticket.tenant_id}`}
                                            className="text-foreground hover:text-primary text-sm font-medium transition-colors"
                                        >
                                            {ticket.tenant_name}
                                        </Link>
                                    </dd>
                                </div>

                                <div>
                                    <dt className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                                        <User className="h-3.5 w-3.5" />{' '}
                                        Submitter
                                    </dt>
                                    <dd className="mt-0.5 text-sm">
                                        {ticket.author_name ?? '—'}
                                        {ticket.author_email && (
                                            <p className="text-muted-foreground text-[11px]">
                                                {ticket.author_email}
                                            </p>
                                        )}
                                    </dd>
                                </div>

                                <div>
                                    <dt className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                                        <Tag className="h-3.5 w-3.5" /> Category
                                    </dt>
                                    <dd className="mt-0.5 text-sm capitalize">
                                        {CATEGORY_LABELS[ticket.category] ??
                                            ticket.category}
                                    </dd>
                                </div>

                                <div>
                                    <dt className="text-muted-foreground mb-1 flex items-center gap-1.5 text-xs font-medium">
                                        Priority
                                    </dt>
                                    <dd>
                                        <span
                                            className={cn(
                                                'inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium capitalize',
                                                PRIORITY_STYLES[
                                                    ticket.priority
                                                ] ??
                                                    'bg-muted text-muted-foreground',
                                            )}
                                        >
                                            {ticket.priority}
                                        </span>
                                    </dd>
                                </div>

                                <div>
                                    <dt className="text-muted-foreground flex items-center gap-1.5 text-xs font-medium">
                                        <Clock className="h-3.5 w-3.5" /> Last
                                        updated
                                    </dt>
                                    <dd className="mt-0.5 text-sm">
                                        {formatDistanceToNow(
                                            parseServerDate(ticket.updated_at),
                                            { addSuffix: true },
                                        )}
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        <div className="bg-card border-border rounded-xl border p-4">
                            <h3 className="text-foreground mb-3 text-sm font-semibold">
                                Replies
                            </h3>
                            <p className="text-foreground text-2xl font-bold">
                                {replies.length}
                            </p>
                            <p className="text-muted-foreground text-xs">
                                {replies.filter((r) => r.is_internal).length}{' '}
                                internal note
                                {replies.filter((r) => r.is_internal).length !==
                                1
                                    ? 's'
                                    : ''}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </AdminLayout>
    );
}