"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { FileText, PenSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card";
import type { Network } from "@/lib/types";

interface DraftPost {
  id: string;
  content: string;
  networks: Network[] | string;
  status: string;
  track: string | null;
  createdAt: string;
  updatedAt: string;
  reviewComment?: string | null;
  reviewer?: { name: string | null; email?: string } | null;
}

export default function DraftsPage() {
  const router = useRouter();
  const [drafts, setDrafts] = useState<DraftPost[]>([]);
  const [loading, setLoading] = useState(true);

  const fetchDrafts = async () => {
    try {
      const res = await fetch("/api/v1/posts?status=DRAFT&status=REJECTED&limit=100");
      if (!res.ok) return;
      const data: DraftPost[] = await res.json();
      setDrafts(data);
    } catch {
      // silent
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDrafts();
  }, []);

  const handleDelete = async (id: string) => {
    if (!confirm("Delete this draft?")) return;
    const res = await fetch(`/api/v1/posts/${id}`, { method: "DELETE" });
    if (res.ok) fetchDrafts();
  };

  return (
    <div className="space-y-6">
      <div className="border-b border-gray-100 -mx-4 md:-mx-6 -mt-4 md:-mt-6 px-4 sm:px-8 py-4 sm:py-5 mb-4 sm:mb-6">
        <h1 className="text-2xl font-semibold text-gray-900">Drafts</h1>
        <p className="text-sm text-gray-500">Your saved drafts</p>
      </div>

      {loading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="rounded-lg border border-gray-200 p-4 space-y-2 animate-pulse">
              <div className="h-4 w-3/4 bg-gray-100 rounded" />
              <div className="h-3 w-1/2 bg-gray-100 rounded" />
            </div>
          ))}
        </div>
      ) : drafts.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed border-gray-300 py-20">
          <FileText className="h-12 w-12 text-gray-300 mb-4" />
          <p className="text-sm font-medium text-gray-600">No drafts yet</p>
          <p className="text-xs text-gray-500 mt-1">Save a draft from the compose page to see it here.</p>
        </div>
      ) : (
        <div className="space-y-3">
          {drafts.map((draft) => {
            const networks: string[] =
              typeof draft.networks === "string"
                ? (() => { try { return JSON.parse(draft.networks); } catch { return []; } })()
                : draft.networks;
            return (
              <Card key={draft.id} className="p-4 border border-gray-200 rounded-lg shadow-none bg-white">
                {/* UXG-5: Show rejection reason banner */}
                {draft.status === "REJECTED" && draft.reviewComment && (
                  <div className="rounded-md bg-red-50 border border-red-200 px-3 py-2 mb-3 text-sm text-red-700">
                    <span className="font-medium">Rejected:</span> {draft.reviewComment}
                    {draft.reviewer && (
                      <span className="text-red-500 text-xs ml-1">— {draft.reviewer.name || draft.reviewer.email}</span>
                    )}
                  </div>
                )}
                <div className="flex items-start justify-between gap-4">
                  <div className="min-w-0 flex-1">
                    <p className="text-sm text-gray-900 line-clamp-2">{draft.content}</p>
                    <div className="flex items-center gap-2 mt-2">
                      {/* UXG-1: Status badge */}
                      <Badge className={`text-[10px] px-1.5 py-0 rounded-full ${
                        draft.status === "REJECTED" ? "bg-red-100 text-red-700" : "bg-gray-100 text-gray-600"
                      }`}>
                        {draft.status === "REJECTED" ? "Rejected" : "Draft"}
                      </Badge>
                      {networks.map((n) => (
                        <Badge key={n} variant="outline" className="text-[10px] border-gray-200">{n}</Badge>
                      ))}
                      {draft.track && (
                        <Badge className="text-[10px] bg-gray-100 text-gray-600">{draft.track}</Badge>
                      )}
                      <span className="text-[10px] text-gray-400">
                        Updated {new Date(draft.updatedAt).toLocaleDateString()}
                      </span>
                    </div>
                  </div>
                  <div className="flex gap-2 shrink-0">
                    <Button
                      variant="outline"
                      size="sm"
                      className="border-gray-200 text-gray-700 hover:bg-gray-50"
                      onClick={() => router.push(`/dashboard/compose?edit=${draft.id}`)}
                    >
                      <PenSquare className="h-3.5 w-3.5 mr-1" />
                      Edit
                    </Button>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => handleDelete(draft.id)}
                    >
                      Delete
                    </Button>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}