"use client";

import { useMemo, useState } from "react";
import { Monitor, Smartphone, FileText } from "lucide-react";
import { stripDangerousHtml } from "@/lib/html-safety";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useLocale } from "@/components/providers/locale-provider";
import { cn } from "@/lib/utils";

export function TemplatePreview({
  subject,
  htmlContent,
  textContent,
  className,
}: {
  subject: string;
  htmlContent: string;
  textContent: string;
  className?: string;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const safeHtml = useMemo(() => stripDangerousHtml(htmlContent ?? ""), [htmlContent]);
  const [tab, setTab] = useState("desktop");
  const hasHtml = safeHtml.length > 0;

  return (
    <div className={cn("surface-elevated overflow-hidden", className)}>
      <div className="border-b border-border bg-muted/30 px-4 py-3">
        <p className="text-xs text-muted-foreground">{isAr ? "العنوان" : "Subject"}</p>
        <p className="font-semibold">{subject || "—"}</p>
      </div>

      <Tabs value={tab} onValueChange={setTab} className="p-4">
        <TabsList className="mb-4 grid w-full grid-cols-3">
          <TabsTrigger value="desktop" className="gap-1.5 text-xs">
            <Monitor className="h-3.5 w-3.5" />
            Desktop
          </TabsTrigger>
          <TabsTrigger value="mobile" className="gap-1.5 text-xs">
            <Smartphone className="h-3.5 w-3.5" />
            Mobile
          </TabsTrigger>
          <TabsTrigger value="text" className="gap-1.5 text-xs">
            <FileText className="h-3.5 w-3.5" />
            Text
          </TabsTrigger>
        </TabsList>

        <TabsContent value="desktop">
          <div className="mx-auto rounded-lg bg-[#e8eef3] p-6">
            {hasHtml ? (
              <div
                className="mx-auto max-w-[600px] overflow-hidden rounded-lg bg-white shadow-lg"
                dangerouslySetInnerHTML={{ __html: safeHtml }}
              />
            ) : (
              <p className="py-12 text-center text-sm text-muted-foreground">
                {isAr ? "ابدأ الكتابة لعرض المعاينة" : "Start editing to see preview"}
              </p>
            )}
          </div>
        </TabsContent>

        <TabsContent value="mobile">
          <div className="mx-auto max-w-[375px] rounded-[24px] border-4 border-border bg-[#e8eef3] p-3 shadow-xl">
            {hasHtml ? (
              <div
                className="overflow-hidden rounded-lg bg-white"
                dangerouslySetInnerHTML={{ __html: safeHtml }}
              />
            ) : (
              <p className="py-8 text-center text-xs text-muted-foreground">—</p>
            )}
          </div>
        </TabsContent>

        <TabsContent value="text">
          <pre className="max-h-[400px] overflow-auto whitespace-pre-wrap rounded-lg border border-border bg-muted/30 p-4 text-sm">
            {textContent || "—"}
          </pre>
        </TabsContent>
      </Tabs>
    </div>
  );
}