"use client";

import type { DashboardArticleItem } from "@/components/dashboard/blogs/articles-types";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import { getAssetUrl } from "@/lib/api-enabled";
import { cn } from "@/lib/utils";
import { CircleAlert } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import { useState } from "react";

interface BlogPreviewViewProps {
  article: DashboardArticleItem;
}

type PreviewTab = "info" | "preview";

export function BlogPreviewView({ article }: BlogPreviewViewProps) {
  const t = useTranslations("dashboard.blogs.preview");
  const locale = useLocale();
  const isRtl = locale === "ar";

  const [activeTab, setActiveTab] = useState<PreviewTab>("info");

  const imageSrc = getAssetUrl(article.featured_image || article.image || "");

  return (
    <Card className="rounded-2xl border border-border shadow-none">
      <CardContent className="space-y-6 p-6">
        <div className={cn("flex items-center gap-8 border-b border-border pb-3", isRtl ? "" : "justify-start")}>
          <button
            type="button"
            onClick={() => setActiveTab("preview")}
            className={cn(
              "border-b-2 pb-2 text-sm font-medium transition-colors",
              activeTab === "preview" ? "border-primary text-primary" : "border-transparent text-muted-foreground",
            )}
          >
            {t("tabs.preview")}
          </button>
          <button
            type="button"
            onClick={() => setActiveTab("info")}
            className={cn(
              "border-b-2 pb-2 text-sm font-medium transition-colors",
              activeTab === "info" ? "border-primary text-primary" : "border-transparent text-muted-foreground",
            )}
          >
            {t("tabs.info")}
          </button>
        </div>

        {activeTab === "info" ? (
          <div className="space-y-5">
            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
              <DetailField label={t("fields.title")} value={article.title} />
              <DetailField label={t("fields.category")} value={article.category?.name ?? "—"} />
              <DetailField label={t("fields.status")} value={t(`statuses.${article.status}`)} />
              <DetailField
                label={t("fields.publishDate")}
                value={article.published_at ?? article.scheduled_at ?? "—"}
              />
              <DetailField label={t("fields.author")} value={article.author?.name ?? "—"} />
              <DetailField label={t("fields.slug")} value={article.slug} />
              {article.source ? <DetailField label={t("fields.source")} value={article.source} /> : null}
            </div>

            <div className="space-y-3">
              <p className="text-sm text-muted-foreground">{t("fields.tags")}</p>
              <div className={cn("flex flex-wrap gap-2", isRtl ? "" : "justify-start")}>
                {article.tags.map((tag) => (
                  <Badge
                    key={tag.id}
                    variant="outline"
                    className="rounded-lg border-primary-100 bg-primary-50 px-3 py-1 text-primary-900"
                  >
                    {tag.name}
                  </Badge>
                ))}
              </div>
            </div>

            <div className={cn("flex items-center justify-between border-t border-border pt-4", isRtl ? "flex-row" : "flex-row-reverse")}>
              <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", isRtl ? "flex-row" : "flex-row-reverse")}>
                <CircleAlert className="size-4" />
                <span>{t("featuredHint")}</span>
              </div>
              <div className={cn("flex items-center gap-2", isRtl ? "flex-row" : "flex-row-reverse")}>
                <span className="text-sm text-foreground">{t("fields.featured")}</span>
                <Switch checked={article.is_featured} disabled />
              </div>
            </div>
          </div>
        ) : (
          <article className="space-y-5">
            <h2 className="text-xl font-bold text-foreground">{article.title}</h2>
            {article.excerpt ? (
              <p className="text-sm text-muted-foreground">{article.excerpt}</p>
            ) : null}
            {imageSrc ? (
              <Image
                src={imageSrc}
                alt={article.image_alt ?? article.title}
                width={960}
                height={300}
                className="h-[300px] w-full rounded-xl object-cover"
              />
            ) : null}
            {article.body ? (
              <p className="text-sm leading-7 text-foreground">{article.body}</p>
            ) : null}
          </article>
        )}
      </CardContent>
    </Card>
  );
}

function DetailField({ label, value }: { label: string; value: string }) {
  return (
    <div className="space-y-1">
      <p className="text-sm text-muted-foreground">{label}</p>
      <p className="text-sm font-bold text-foreground">{value}</p>
    </div>
  );
}