"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { CheckCircle2, Loader2, Mail, MailOpen } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { adminApi, type ContactSubmissionResponse } from "@/lib/api";
import { getAdminToken } from "@/lib/admin-store";
import { cn } from "@/lib/utils";

function formatDate(value: string) {
  return new Intl.DateTimeFormat("en", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date(value));
}

export default function AdminContactSubmissionsPage() {
  const router = useRouter();
  const [submissions, setSubmissions] = useState<ContactSubmissionResponse[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
  const [savingId, setSavingId] = useState<number | null>(null);
  const [error, setError] = useState("");

  const loadSubmissions = useCallback(async () => {
    const token = await getAdminToken();
    if (!token) {
      router.push("/admin-login");
      return;
    }
    const data = await adminApi.getContactSubmissions(token);
    setSubmissions(data);
    setSelectedId((current) => current ?? data[0]?.id ?? null);
  }, [router]);

  useEffect(() => {
    (async () => {
      try {
        await loadSubmissions();
      } catch {
        router.push("/admin-login");
      } finally {
        setLoading(false);
      }
    })();
  }, [loadSubmissions, router]);

  const selected = useMemo(
    () => submissions.find((submission) => submission.id === selectedId) ?? null,
    [selectedId, submissions]
  );

  const unreadCount = submissions.filter((submission) => !submission.is_read).length;

  const markRead = async (submissionId: number) => {
    const token = await getAdminToken();
    if (!token) return;

    setSavingId(submissionId);
    setError("");
    try {
      const updated = await adminApi.markContactSubmissionRead(token, submissionId);
      setSubmissions((prev) => prev.map((item) => (item.id === updated.id ? updated : item)));
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Could not update submission");
    } finally {
      setSavingId(null);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20 text-zinc-500">
        <Loader2 className="w-5 h-5 animate-spin mr-2" /> Loading contact submissions...
      </div>
    );
  }

  return (
    <div>
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Contact Submissions</h1>
          <p className="text-zinc-500 text-sm mt-1">Messages sent from the public contact page</p>
        </div>
        <Badge className="bg-violet-500/15 text-violet-300 border-violet-500/30">
          {unreadCount} unread
        </Badge>
      </div>

      {error && (
        <div className="mb-4 text-xs text-red-400 p-3 rounded-lg bg-red-500/10 border border-red-500/20">
          {error}
        </div>
      )}

      {submissions.length === 0 ? (
        <div className="glass-card p-10 text-center">
          <Mail className="w-8 h-8 text-zinc-600 mx-auto mb-3" />
          <div className="text-sm text-zinc-400">No contact submissions yet.</div>
        </div>
      ) : (
        <div className="grid xl:grid-cols-[420px_minmax(0,1fr)] gap-6">
          <div className="glass-card overflow-hidden">
            {submissions.map((submission) => (
              <button
                key={submission.id}
                type="button"
                onClick={() => setSelectedId(submission.id)}
                className={cn(
                  "block w-full border-b border-white/5 px-5 py-4 text-left transition-colors hover:bg-white/5",
                  selectedId === submission.id && "bg-violet-500/10",
                  !submission.is_read && "bg-white/[0.03]"
                )}
              >
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="truncate text-sm font-medium text-white">{submission.name}</span>
                      {!submission.is_read && (
                        <span className="h-2 w-2 rounded-full bg-violet-400 flex-shrink-0" />
                      )}
                    </div>
                    <div className="truncate text-xs text-zinc-500">{submission.email}</div>
                  </div>
                  <span className="text-[11px] text-zinc-600 flex-shrink-0">
                    {formatDate(submission.created_at)}
                  </span>
                </div>
                <div className="mt-2 text-sm text-zinc-300 capitalize">{submission.subject}</div>
                <div className="mt-1 line-clamp-2 text-xs text-zinc-500">{submission.message}</div>
              </button>
            ))}
          </div>

          {selected && (
            <div className="glass-card p-6 h-fit">
              <div className="flex items-start justify-between gap-4 border-b border-white/8 pb-5">
                <div>
                  <div className="flex items-center gap-2">
                    {selected.is_read ? (
                      <MailOpen className="w-4 h-4 text-zinc-500" />
                    ) : (
                      <Mail className="w-4 h-4 text-violet-400" />
                    )}
                    <h2 className="text-lg font-semibold text-white capitalize">{selected.subject}</h2>
                  </div>
                  <div className="mt-2 text-sm text-zinc-400">
                    {selected.name} <span className="text-zinc-600">&lt;{selected.email}&gt;</span>
                  </div>
                  <div className="mt-1 text-xs text-zinc-600">{formatDate(selected.created_at)}</div>
                </div>
                {!selected.is_read && (
                  <Button
                    type="button"
                    size="sm"
                    disabled={savingId === selected.id}
                    onClick={() => markRead(selected.id)}
                    className="bg-white/5 border border-white/10 text-zinc-200 hover:bg-white/10"
                  >
                    {savingId === selected.id ? (
                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    ) : (
                      <CheckCircle2 className="w-4 h-4 mr-2" />
                    )}
                    Mark read
                  </Button>
                )}
              </div>
              <p className="mt-5 whitespace-pre-wrap text-sm leading-6 text-zinc-300">{selected.message}</p>
              <div className="mt-6">
                <a
                  href={`mailto:${selected.email}?subject=Re: ${encodeURIComponent(selected.subject)}`}
                  className="inline-flex h-10 items-center justify-center rounded-md bg-gradient-to-r from-violet-600 to-violet-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:from-violet-500 hover:to-violet-400"
                >
                  Reply by Email
                </a>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}