"use client";

import { useCallback, useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface CanvaDesignSummary {
  id: string;
  title?: string;
  thumbnailUrl?: string;
  updatedAt?: string;
  editUrl?: string;
}

interface CanvaPickerProps {
  onPicked: (file: { id: string; mime: string; canvaDesignId: string }) => void;
  onClose: () => void;
}

export function CanvaPicker({ onPicked, onClose }: CanvaPickerProps) {
  const [designs, setDesigns] = useState<CanvaDesignSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>("");
  const [exportingId, setExportingId] = useState<string | null>(null);
  const [progress, setProgress] = useState<string>("");

  const refresh = useCallback(async () => {
    setLoading(true);
    setError("");
    try {
      const resp = await fetch("/api/canva/designs?limit=50");
      const data = await resp.json();
      if (!resp.ok) throw new Error(data.error || "Failed");
      setDesigns(data.designs ?? []);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Unknown error");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    const t = setTimeout(() => void refresh(), 0);
    return () => clearTimeout(t);
  }, [refresh]);

  async function pickDesign(design: CanvaDesignSummary) {
    setExportingId(design.id);
    setProgress("Asking Canva to export…");
    try {
      const startResp = await fetch("/api/canva/export", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ designId: design.id, format: "png" }),
      });
      const startData = await startResp.json();
      if (!startResp.ok) throw new Error(startData.error || "Export failed");
      const jobId = startData.jobId as string;

      // Poll until done. Cap at ~60 seconds so we never spin forever.
      let url: string | undefined;
      for (let i = 0; i < 30; i++) {
        await new Promise((r) => setTimeout(r, 2000));
        const pollResp = await fetch(`/api/canva/export?jobId=${encodeURIComponent(jobId)}`);
        const pollData = await pollResp.json();
        if (!pollResp.ok) throw new Error(pollData.error || "Poll failed");
        setProgress(`Canva: ${pollData.status}`);
        if (pollData.status === "success" && Array.isArray(pollData.urls)) {
          url = pollData.urls[0];
          break;
        }
        if (pollData.status === "failed") throw new Error("Canva export failed");
      }
      if (!url) throw new Error("Canva export timed out");

      setProgress("Downloading…");
      const fetched = await fetch(url);
      const blob = await fetched.blob();
      const file = new File([blob], `${design.title || design.id}.png`, { type: "image/png" });

      const formData = new FormData();
      formData.append("file", file);
      formData.append("source", "canva");
      const uploadResp = await fetch("/api/social/media", { method: "POST", body: formData });
      const uploadData = await uploadResp.json();
      if (!uploadResp.ok) throw new Error(uploadData.error || "Upload failed");
      onPicked({
        id: uploadData.media.id,
        mime: uploadData.media.mime,
        canvaDesignId: design.id,
      });
      onClose();
    } catch (e) {
      setError(e instanceof Error ? e.message : "Unknown error");
    } finally {
      setExportingId(null);
      setProgress("");
    }
  }

  return (
    <div
      className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4"
      onClick={onClose}
    >
      <Card
        className="w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        <CardContent className="p-5 flex items-center justify-between border-b">
          <div>
            <h2 className="text-base font-semibold">📐 Pick a Canva design</h2>
            <p className="text-xs text-muted-foreground">
              Exports as PNG, dedupes, and drops into the composer.
            </p>
          </div>
          <Button variant="ghost" size="sm" onClick={onClose}>
            ×
          </Button>
        </CardContent>

        <div className="flex-1 overflow-y-auto p-5 space-y-3">
          {progress && (
            <Card>
              <CardContent className="p-3 text-xs text-muted-foreground">{progress}</CardContent>
            </Card>
          )}
          {error && (
            <Card>
              <CardContent className="p-3 text-sm text-destructive">{error}</CardContent>
            </Card>
          )}

          {loading ? (
            <p className="text-sm text-muted-foreground">Loading designs…</p>
          ) : designs.length === 0 ? (
            <div className="text-center py-12">
              <div className="text-4xl mb-2">📐</div>
              <p className="text-sm font-medium">No designs found</p>
              <p className="mt-1 text-xs text-muted-foreground max-w-md mx-auto">
                Either your Canva account has no designs yet, or the Canva integration isn’t
                configured. Visit <code className="text-[11px]">/app/social/accounts</code> to
                connect Canva.
              </p>
            </div>
          ) : (
            <div className="grid gap-3 md:grid-cols-3">
              {designs.map((d) => {
                const isExporting = exportingId === d.id;
                return (
                  <Card key={d.id} className={isExporting ? "opacity-50" : ""}>
                    <CardContent className="p-3 space-y-2">
                      {d.thumbnailUrl ? (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img
                          src={d.thumbnailUrl}
                          alt={d.title ?? d.id}
                          className="w-full h-32 object-cover rounded-md border"
                          referrerPolicy="no-referrer"
                        />
                      ) : (
                        <div className="w-full h-32 bg-muted rounded-md border flex items-center justify-center text-3xl">
                          📐
                        </div>
                      )}
                      <div>
                        <div className="text-xs font-medium truncate">{d.title ?? d.id}</div>
                        {d.updatedAt && (
                          <div className="text-[10px] text-muted-foreground">
                            Updated {new Date(d.updatedAt).toLocaleDateString()}
                          </div>
                        )}
                      </div>
                      <div className="flex items-center gap-1">
                        <Button
                          variant="brand"
                          size="sm"
                          className="flex-1"
                          disabled={!!exportingId}
                          onClick={() => pickDesign(d)}
                        >
                          {isExporting ? "Exporting…" : "Use design"}
                        </Button>
                        {d.editUrl && (
                          <Button asChild variant="outline" size="sm">
                            <a href={d.editUrl} target="_blank" rel="noopener noreferrer">
                              Edit
                            </a>
                          </Button>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>
          )}
        </div>

        <CardContent className="p-3 border-t flex items-center justify-between text-[11px] text-muted-foreground">
          <span>Canva Connect API — PNG export</span>
          <Badge variant="outline" className="text-[10px]">
            Round-trip
          </Badge>
        </CardContent>
      </Card>
    </div>
  );
}