"use client"

import { useMemo, useState } from "react"
import {
  Archive,
  ArrowLeft,
  Inbox,
  Pencil,
  RotateCcw,
  Search,
  Send,
  Star,
  Trash2,
  X,
} from "lucide-react"
import { toast } from "sonner"
import { Button } from "@/components/ui/button"
import { avatarColor, senderInitial } from "@/lib/sender-display"
import {
  DEMO_EMAILS,
  DEMO_USER,
  type DemoEmail,
  type DemoFolder,
} from "@/components/demo/demo-mail-data"
import { cn } from "@/lib/utils"

const FOLDERS: { id: DemoFolder; label: string; icon: typeof Inbox }[] = [
  { id: "inbox", label: "Boîte de réception", icon: Inbox },
  { id: "starred", label: "Favoris", icon: Star },
  { id: "sent", label: "Envoyés", icon: Send },
  { id: "archive", label: "Archive", icon: Archive },
  { id: "trash", label: "Corbeille", icon: Trash2 },
]

function demoToast(message: string) {
  toast.message(message, {
    description: "Mode démo : rien n'est envoyé ni conservé.",
  })
}

function Avatar({ name, className }: { name: string; className?: string }) {
  return (
    <span
      className={cn(
        "flex shrink-0 items-center justify-center rounded-full text-sm font-medium text-white",
        className ?? "size-9"
      )}
      style={{ backgroundColor: avatarColor(name) }}
      aria-hidden
    >
      {senderInitial(name)}
    </span>
  )
}

function ComposeModal({
  onClose,
  onSend,
}: {
  onClose: () => void
  onSend: (email: { to: string; subject: string; body: string }) => void
}) {
  const [to, setTo] = useState("")
  const [subject, setSubject] = useState("")
  const [body, setBody] = useState("")

  return (
    <div className="absolute bottom-0 right-0 z-30 flex w-full max-w-md flex-col overflow-hidden rounded-t-xl border border-[var(--mail-border)] bg-[var(--mail-surface-elevated)] shadow-2xl sm:bottom-4 sm:right-4 sm:rounded-xl">
      <div className="flex items-center justify-between bg-[var(--mail-surface-muted)] px-4 py-2.5">
        <span className="text-sm font-medium text-[var(--mail-text-strong)]">
          Nouveau message
        </span>
        <button
          type="button"
          onClick={onClose}
          className="rounded p-1 text-[var(--mail-text-muted)] hover:bg-[var(--mail-hover)]"
          aria-label="Fermer"
        >
          <X className="size-4" />
        </button>
      </div>
      <div className="flex flex-col divide-y divide-[var(--mail-border-subtle)] px-4">
        <input
          value={to}
          onChange={(e) => setTo(e.target.value)}
          placeholder="À"
          className="bg-transparent py-2.5 text-sm text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
        />
        <input
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          placeholder="Objet"
          className="bg-transparent py-2.5 text-sm text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
        />
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Votre message…"
          rows={7}
          className="resize-none bg-transparent py-2.5 text-sm leading-relaxed text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
        />
      </div>
      <div className="flex items-center justify-between px-4 py-3">
        <Button
          size="sm"
          className="rounded-full px-5"
          onClick={() => {
            onSend({ to, subject, body })
            onClose()
          }}
        >
          Envoyer
        </Button>
        <span className="text-[11px] text-[var(--mail-text-muted)]">
          Démo — aucun envoi réel
        </span>
      </div>
    </div>
  )
}

export function DemoMailApp() {
  const [emails, setEmails] = useState<DemoEmail[]>(DEMO_EMAILS)
  const [folder, setFolder] = useState<DemoFolder>("inbox")
  const [selectedId, setSelectedId] = useState<string | null>(null)
  const [query, setQuery] = useState("")
  const [composeOpen, setComposeOpen] = useState(false)
  const [replyDraft, setReplyDraft] = useState("")

  const visible = useMemo(() => {
    const inFolder =
      folder === "starred"
        ? emails.filter((e) => e.starred && e.folder !== "trash")
        : emails.filter((e) => e.folder === folder)
    const q = query.trim().toLowerCase()
    if (!q) return inFolder
    return inFolder.filter((e) =>
      [e.fromName, e.fromEmail, e.subject, e.preview].some((field) =>
        field.toLowerCase().includes(q)
      )
    )
  }, [emails, folder, query])

  const selected = emails.find((e) => e.id === selectedId) ?? null
  const unreadCount = emails.filter(
    (e) => e.folder === "inbox" && e.unread
  ).length

  const patchEmail = (id: string, patch: Partial<DemoEmail>) =>
    setEmails((prev) => prev.map((e) => (e.id === id ? { ...e, ...patch } : e)))

  const openEmail = (email: DemoEmail) => {
    setSelectedId(email.id)
    setReplyDraft("")
    if (email.unread) patchEmail(email.id, { unread: false })
  }

  const moveEmail = (id: string, dest: DemoEmail["folder"], message: string) => {
    patchEmail(id, { folder: dest })
    if (selectedId === id) setSelectedId(null)
    demoToast(message)
  }

  const sendCompose = (draft: { to: string; subject: string; body: string }) => {
    setEmails((prev) => [
      {
        id: `sent-${Date.now()}`,
        fromName: DEMO_USER.name,
        fromEmail: DEMO_USER.email,
        subject: draft.subject || "(sans objet)",
        preview: draft.body.slice(0, 110) || "(message vide)",
        body: draft.body ? draft.body.split("\n\n") : ["(message vide)"],
        time: "À l'instant",
        unread: false,
        starred: false,
        folder: "sent",
      },
      ...prev,
    ])
    demoToast("Message « envoyé »")
  }

  return (
    <div className="relative flex h-dvh flex-col overflow-hidden bg-[var(--app-canvas)] text-[var(--mail-text)]">
      {/* Barre supérieure */}
      <header className="flex h-14 shrink-0 items-center gap-3 border-b border-[var(--mail-border-subtle)] bg-[var(--mail-surface)] px-3 sm:px-4">
        <img
          src="/brand/ultimail-header-icon.png"
          alt=""
          className="h-7 w-7 shrink-0 object-contain"
          aria-hidden
        />
        <span className="hidden text-lg font-semibold text-[var(--mail-text-strong)] sm:block">
          Ultimail
        </span>
        <span className="rounded-full bg-[var(--mail-active)] px-2.5 py-0.5 text-[11px] font-semibold text-[var(--mail-nav-selected-fg)]">
          Démo
        </span>
        <div className="flex min-w-0 flex-1 items-center gap-2 rounded-full bg-[var(--mail-surface-muted)] px-3.5 py-2 sm:mx-4">
          <Search className="size-4 shrink-0 text-[var(--mail-text-muted)]" aria-hidden />
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Rechercher dans les messages"
            className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--mail-text-muted)]"
            aria-label="Rechercher"
          />
        </div>
        <span
          className="hidden items-center gap-1.5 rounded-full border border-[var(--mail-border)] px-2.5 py-1 text-[11px] font-medium text-[var(--mail-text-muted)] md:inline-flex"
          title="Vos actions restent dans cet onglet et disparaissent au rechargement."
        >
          <RotateCcw className="size-3" aria-hidden />
          Zéro rétention
        </span>
        <Avatar name={DEMO_USER.name} className="size-8 text-xs" />
      </header>

      <div className="flex min-h-0 flex-1">
        {/* Barre latérale */}
        <aside className="hidden w-56 shrink-0 flex-col gap-1 px-3 py-4 sm:flex">
          <Button
            className="mb-3 h-12 w-fit rounded-2xl px-5 shadow-sm"
            onClick={() => setComposeOpen(true)}
          >
            <Pencil className="size-4" aria-hidden />
            Nouveau message
          </Button>
          {FOLDERS.map((f) => {
            const FolderIcon = f.icon
            const active = folder === f.id
            return (
              <button
                key={f.id}
                type="button"
                onClick={() => {
                  setFolder(f.id)
                  setSelectedId(null)
                }}
                className={cn(
                  "flex items-center justify-between rounded-full px-4 py-1.5 text-sm transition-colors",
                  active
                    ? "bg-[var(--mail-nav-selected)] font-semibold text-[var(--mail-nav-selected-fg)]"
                    : "hover:bg-[var(--mail-nav-hover)]"
                )}
              >
                <span className="flex items-center gap-3">
                  <FolderIcon className="size-4" aria-hidden />
                  {f.label}
                </span>
                {f.id === "inbox" && unreadCount > 0 ? (
                  <span className="text-xs font-semibold">{unreadCount}</span>
                ) : null}
              </button>
            )
          })}
        </aside>

        {/* Contenu */}
        <main className="m-0 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--mail-surface)] sm:mb-3 sm:mr-3 sm:rounded-2xl sm:border sm:border-[var(--mail-border-subtle)]">
          {selected ? (
            <article className="flex min-h-0 flex-1 flex-col">
              <div className="flex shrink-0 items-center gap-1 border-b border-[var(--mail-border-subtle)] px-2 py-2 sm:px-4">
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSelectedId(null)}
                  aria-label="Retour à la liste"
                >
                  <ArrowLeft className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() =>
                    moveEmail(selected.id, "archive", "Message archivé")
                  }
                  aria-label="Archiver"
                >
                  <Archive className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() =>
                    moveEmail(selected.id, "trash", "Message placé dans la corbeille")
                  }
                  aria-label="Supprimer"
                >
                  <Trash2 className="size-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => patchEmail(selected.id, { starred: !selected.starred })}
                  aria-label={selected.starred ? "Retirer des favoris" : "Ajouter aux favoris"}
                >
                  <Star
                    className={cn(
                      "size-4",
                      selected.starred && "fill-amber-400 text-amber-400"
                    )}
                  />
                </Button>
              </div>
              <div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-8">
                <h1 className="text-xl font-normal text-[var(--mail-text-strong)] sm:text-2xl">
                  {selected.subject}
                </h1>
                <div className="mt-5 flex items-center gap-3">
                  <Avatar name={selected.fromName} />
                  <div className="min-w-0">
                    <p className="truncate text-sm font-semibold text-[var(--mail-text-strong)]">
                      {selected.fromName}
                      <span className="ml-2 font-normal text-[var(--mail-text-muted)]">
                        &lt;{selected.fromEmail}&gt;
                      </span>
                    </p>
                    <p className="text-xs text-[var(--mail-text-muted)]">
                      À moi · {selected.time}
                    </p>
                  </div>
                </div>
                <div className="mt-6 max-w-2xl space-y-4 text-[15px] leading-relaxed">
                  {selected.body.map((paragraph, i) => (
                    <p key={i} className="whitespace-pre-line">
                      {paragraph}
                    </p>
                  ))}
                </div>
                <div className="mt-8 max-w-2xl rounded-2xl border border-[var(--mail-border)] p-4">
                  <textarea
                    value={replyDraft}
                    onChange={(e) => setReplyDraft(e.target.value)}
                    placeholder={`Répondre à ${selected.fromName}…`}
                    rows={3}
                    className="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-[var(--mail-text-muted)]"
                  />
                  <div className="mt-2 flex items-center justify-between">
                    <Button
                      size="sm"
                      className="rounded-full px-5"
                      onClick={() => {
                        setReplyDraft("")
                        demoToast("Réponse « envoyée »")
                      }}
                    >
                      Envoyer
                    </Button>
                    <span className="text-[11px] text-[var(--mail-text-muted)]">
                      Démo — aucun envoi réel
                    </span>
                  </div>
                </div>
              </div>
            </article>
          ) : (
            <div className="min-h-0 flex-1 overflow-y-auto">
              {visible.length === 0 ? (
                <div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
                  <Inbox className="size-8 text-[var(--mail-text-muted)]" aria-hidden />
                  <p className="text-sm text-[var(--mail-text-muted)]">
                    {query
                      ? "Aucun message ne correspond à votre recherche."
                      : "Ce dossier est vide."}
                  </p>
                </div>
              ) : (
                <ul className="divide-y divide-[var(--mail-list-divider)]">
                  {visible.map((email) => (
                    <li key={email.id}>
                      <div
                        role="button"
                        tabIndex={0}
                        onClick={() => openEmail(email)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter" || e.key === " ") openEmail(email)
                        }}
                        className={cn(
                          "group flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors hover:bg-[var(--mail-hover)] sm:px-4",
                          email.unread
                            ? "bg-[var(--mail-row-unread)]"
                            : "bg-[var(--mail-row-read)]"
                        )}
                      >
                        <button
                          type="button"
                          onClick={(e) => {
                            e.stopPropagation()
                            patchEmail(email.id, { starred: !email.starred })
                          }}
                          className="shrink-0 rounded p-1 text-[var(--mail-text-muted)] hover:text-amber-500"
                          aria-label={
                            email.starred ? "Retirer des favoris" : "Ajouter aux favoris"
                          }
                        >
                          <Star
                            className={cn(
                              "size-4",
                              email.starred && "fill-amber-400 text-amber-400"
                            )}
                          />
                        </button>
                        <Avatar name={email.fromName} className="hidden size-8 text-xs sm:flex" />
                        <span
                          className={cn(
                            "w-32 shrink-0 truncate text-sm sm:w-44",
                            email.unread
                              ? "font-semibold text-[var(--mail-text-strong)]"
                              : "text-[var(--mail-text)]"
                          )}
                        >
                          {email.fromName}
                        </span>
                        <span className="min-w-0 flex-1 truncate text-sm">
                          {email.label ? (
                            <span
                              className="mr-2 rounded px-1.5 py-px text-[10px] font-semibold text-white"
                              style={{ backgroundColor: email.label.color }}
                            >
                              {email.label.text}
                            </span>
                          ) : null}
                          <span
                            className={cn(
                              email.unread
                                ? "font-semibold text-[var(--mail-text-strong)]"
                                : "text-[var(--mail-text)]"
                            )}
                          >
                            {email.subject}
                          </span>
                          <span className="text-[var(--mail-text-muted)]">
                            {" "}
                            — {email.preview}
                          </span>
                        </span>
                        <span className="hidden shrink-0 items-center gap-1 group-hover:flex">
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation()
                              moveEmail(email.id, "archive", "Message archivé")
                            }}
                            className="rounded p-1.5 text-[var(--mail-text-muted)] hover:bg-[var(--mail-surface-muted)]"
                            aria-label="Archiver"
                          >
                            <Archive className="size-4" />
                          </button>
                          <button
                            type="button"
                            onClick={(e) => {
                              e.stopPropagation()
                              moveEmail(email.id, "trash", "Message placé dans la corbeille")
                            }}
                            className="rounded p-1.5 text-[var(--mail-text-muted)] hover:bg-[var(--mail-surface-muted)]"
                            aria-label="Supprimer"
                          >
                            <Trash2 className="size-4" />
                          </button>
                        </span>
                        <span
                          className={cn(
                            "shrink-0 text-xs group-hover:hidden",
                            email.unread
                              ? "font-semibold text-[var(--mail-text-strong)]"
                              : "text-[var(--mail-text-muted)]"
                          )}
                        >
                          {email.time}
                        </span>
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          )}
        </main>
      </div>

      {/* Bouton composer (mobile) */}
      <Button
        className="absolute bottom-5 right-5 z-20 size-14 rounded-2xl shadow-lg sm:hidden"
        onClick={() => setComposeOpen(true)}
        aria-label="Nouveau message"
      >
        <Pencil className="size-5" />
      </Button>

      {composeOpen ? (
        <ComposeModal onClose={() => setComposeOpen(false)} onSend={sendCompose} />
      ) : null}
    </div>
  )
}