"use client";

import { useState } from "react";
import { CheckCircle2, XCircle, AlertTriangle, Info } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { toast } from "@/lib/toast";
import { useTranslation } from "@/hooks/useTranslation";
import { typography } from "@/styles/theme";

export default function NotificationsPreviewPage() {
  const { t } = useTranslation();
  const [dialogOpen, setDialogOpen] = useState(false);

  const handleToast = (type: "success" | "error" | "warning" | "info") => {
    const config = {
      success: {
        title: t.common.previewToastSuccessTitle,
        desc: t.common.previewToastSuccessDesc,
      },
      error: {
        title: t.common.previewToastErrorTitle,
        desc: t.common.previewToastErrorDesc,
      },
      warning: {
        title: t.common.previewToastWarningTitle,
        desc: t.common.previewToastWarningDesc,
      },
      info: {
        title: t.common.previewToastInfoTitle,
        desc: t.common.previewToastInfoDesc,
      },
    }[type];

    toast[type](config.title, { description: config.desc });
  };

  return (
    <div className="px-8 py-10 space-y-8">
      <div className="space-y-2">
        <h1 className={typography.h2}>{t.common.previewTitle}</h1>
        <p className={typography.bodySecondary}>{t.common.previewDescription}</p>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewToastSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewToastHint}</p>
          </div>

          <div className="mt-4 grid gap-3">
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#00b42a]"
              onClick={() => handleToast("success")}
            >
              <span className="flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-[#00b42a]" />
                {t.common.previewToastSuccessTitle}
              </span>
              <span className="text-xs text-[#646a73]">#00B42A</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#f53f3f]"
              onClick={() => handleToast("error")}
            >
              <span className="flex items-center gap-2">
                <XCircle className="h-4 w-4 text-[#f53f3f]" />
                {t.common.previewToastErrorTitle}
              </span>
              <span className="text-xs text-[#646a73]">#F53F3F</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#ff7d00]"
              onClick={() => handleToast("warning")}
            >
              <span className="flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-[#ff7d00]" />
                {t.common.previewToastWarningTitle}
              </span>
              <span className="text-xs text-[#646a73]">#FF7D00</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#3370ff]"
              onClick={() => handleToast("info")}
            >
              <span className="flex items-center gap-2">
                <Info className="h-4 w-4 text-[#3370ff]" />
                {t.common.previewToastInfoTitle}
              </span>
              <span className="text-xs text-[#646a73]">#3370FF</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#3370ff]"
              onClick={() =>
                toast.loading(t.common.previewToastLoadingTitle, {
                  description: t.common.previewToastLoadingDesc,
                  duration: 2000,
                })
              }
            >
              <span className="flex items-center gap-2">
                <CheckCircle2 className="h-4 w-4 text-[#3370ff]" />
                {t.common.previewToastLoadingTitle}
              </span>
              <span className="text-xs text-[#646a73]">#3370FF</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#c9cdd4]"
              onClick={() =>
                toast.neutral(t.common.previewToastNeutralTitle, {
                  description: t.common.previewToastNeutralDesc,
                })
              }
            >
              <span className="flex items-center gap-2">
                <Info className="h-4 w-4 text-[#8f959e]" />
                {t.common.previewToastNeutralTitle}
              </span>
              <span className="text-xs text-[#646a73]">#C9CDD4</span>
            </Button>
            <Button
              variant="outline"
              className="justify-between border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa] border-l-4 border-l-[#ff7d00]"
              onClick={() =>
                toast.action(
                  t.common.previewToastActionTitle,
                  { label: t.common.previewToastActionLabel, onClick: () => {} },
                  { description: t.common.previewToastActionDesc }
                )
              }
            >
              <span className="flex items-center gap-2">
                <AlertTriangle className="h-4 w-4 text-[#ff7d00]" />
                {t.common.previewToastActionTitle}
              </span>
              <span className="text-xs text-[#646a73]">#FF7D00</span>
            </Button>
          </div>
        </section>

        <section className="rounded-lg border border-[#e5e6eb] bg-white p-6 shadow-sm">
          <div className="space-y-1">
            <h2 className={typography.h3}>{t.common.previewDialogSection}</h2>
            <p className={typography.bodySecondary}>{t.common.previewDialogHint}</p>
          </div>

          <div className="mt-4">
            <Button
              className="bg-[#f53f3f] text-white hover:bg-[#d83232]"
              onClick={() => setDialogOpen(true)}
            >
              {t.common.previewDialogOpen}
            </Button>
          </div>
        </section>
      </div>

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="border-[#e5e6eb]">
          <DialogHeader className="space-y-2">
            <DialogTitle className="flex items-center gap-2">
              <span className="h-2 w-2 rounded-full bg-[#f53f3f]" />
              {t.common.previewDialogTitle}
            </DialogTitle>
            <DialogDescription className="text-[#646a73]">
              {t.common.previewDialogDesc}
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2">
            <Button
              variant="outline"
              className="border-[#e5e6eb] text-[#1f2329] hover:bg-[#f7f8fa]"
              onClick={() => setDialogOpen(false)}
            >
              {t.common.cancel}
            </Button>
            <Button
              className="bg-[#f53f3f] text-white hover:bg-[#d83232]"
              onClick={() => setDialogOpen(false)}
            >
              {t.common.previewDialogConfirm}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}