import { useEffect, useMemo, useRef, useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import JSZip from "jszip";
import { ArrowUpRight, Check, Download, FileCode2, FilePlus2, FolderGit2, History, ImageOff, Loader2, Plus, Rocket, Save, Trash2, Upload, X } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { supabase } from "@/integrations/supabase/client";
import { useAuth } from "@/hooks/use-auth";
import { cleanPath, fileBytes, formatBytes, isBinaryFile, isImageValue, isSupportedFile, parseDataUrl, stripCommonRoot, toDataUrl, validateFiles, type CodeFiles } from "@/lib/codehub";
import { ConnectDomainButton } from "@/components/connect-domain";
import { deployCodeProject } from "@/lib/codehub.functions";

type Project = { id: string; name: string; description: string; files: CodeFiles; deployed_url: string | null; updated_at: string };
type Version = { id: string; note: string; created_at: string; files: CodeFiles };

const STARTER: CodeFiles = { "index.html": "<!doctype html>\n<html>\n<head>\n  <meta charset=\"utf-8\" />\n  <title>My project</title>\n  <link rel=\"stylesheet\" href=\"style.css\" />\n</head>\n<body>\n  <h1>Hello from CodeHub</h1>\n</body>\n</html>\n", "style.css": "body { font-family: system-ui; padding: 2rem; }\n" };

const ACCEPT = ".zip,.html,.htm,.css,.js,.mjs,.jsx,.ts,.tsx,.json,.md,.txt,.svg,.xml,.csv,.yml,.yaml,.toml,.py,.sh,.png,.jpg,.jpeg,.gif,.webp,.avif,.bmp,.ico,.woff,.woff2,.ttf,.otf,.pdf";

/** Reads a picked file as plain base64 (no data: prefix). */
function readAsBase64(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result).split(",")[1] ?? "");
    reader.onerror = () => reject(reader.error);
    reader.readAsDataURL(file);
  });
}

export function CodeHub({ publishingConfigured }: { publishingConfigured: boolean }) {
  const { user } = useAuth();
  const [projects, setProjects] = useState<Project[] | null>(null);
  const [openId, setOpenId] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const fileInput = useRef<HTMLInputElement>(null);

  const load = async () => {
    const { data, error } = await supabase.from("code_projects").select("id, name, description, files, deployed_url, updated_at").order("updated_at", { ascending: false }).limit(100);
    if (error) { toast.error("Your CodeHub projects could not load."); setProjects([]); return; }
    setProjects((data ?? []) as Project[]);
  };
  useEffect(() => { void load(); }, []);

  const create = async (name: string, files: CodeFiles, note: string) => {
    if (!user) return;
    const invalid = validateFiles(files);
    if (invalid) { toast.error(invalid); return; }
    const { data, error } = await supabase.from("code_projects").insert({ user_id: user.id, name: name.slice(0, 80) || "Untitled project", files }).select("id").single();
    if (error || !data) { toast.error("The project could not be saved."); return; }
    await supabase.from("code_project_versions").insert({ project_id: data.id, user_id: user.id, files, note });
    toast.success("Project saved to CodeHub."); await load(); setOpenId(data.id);
  };

  const importFiles = async (list: FileList | null) => {
    if (!list?.length) return;
    setBusy(true);
    try {
      const files: CodeFiles = {}; let skipped = 0; let name = "Imported project";
      for (const file of Array.from(list)) {
        if (file.name.toLowerCase().endsWith(".zip")) {
          name = file.name.replace(/\.zip$/i, "");
          const zip = await JSZip.loadAsync(file);
          for (const entry of Object.values(zip.files)) {
            if (entry.dir) continue;
            const path = cleanPath(entry.name);
            if (!path || !isSupportedFile(path)) { skipped++; continue; }
            files[path] = isBinaryFile(path) ? toDataUrl(path, await entry.async("base64")) : await entry.async("string");
          }
        } else {
          const path = cleanPath(file.webkitRelativePath || file.name);
          if (!path || !isSupportedFile(path)) { skipped++; continue; }
          files[path] = isBinaryFile(path) ? toDataUrl(path, await readAsBase64(file)) : await file.text();
        }
      }
      const cleaned = stripCommonRoot(files);
      if (!Object.keys(cleaned).length) { toast.error("No files were found to import."); return; }
      if (skipped) toast.info(`${skipped} unsupported file(s) were skipped — CodeHub stores code, images, fonts and PDFs.`);
      await create(name, cleaned, "Imported");
    } catch { toast.error("That file could not be read. Make sure it's a valid ZIP."); }
    finally { setBusy(false); if (fileInput.current) fileInput.current.value = ""; }
  };

  const open = projects?.find((p) => p.id === openId);
  if (open) return <Editor key={open.id} project={open} publishingConfigured={publishingConfigured} onClose={() => setOpenId(null)} onChanged={load} />;

  return <section className="py-8">
    <div className="flex flex-wrap items-center justify-between gap-4"><div><p className="mb-2 font-mono text-[10px] text-primary">CODEHUB</p><h2 className="text-2xl font-semibold">Your code projects</h2><p className="mt-1 text-sm text-muted-foreground">Private storage for your code, images and fonts. Edit, keep versions, download as ZIP, publish.</p></div>
      <div className="flex flex-wrap gap-2">
        <input ref={fileInput} type="file" multiple accept={ACCEPT} className="hidden" aria-label="Upload code files or ZIP" onChange={(e) => void importFiles(e.target.files)} />
        <Button variant="outline" disabled={busy} onClick={() => fileInput.current?.click()}>{busy ? <Loader2 className="animate-spin" /> : <Upload />}Upload ZIP / files</Button>
        <Button disabled={busy} onClick={() => void create("New project", STARTER, "Created")}><Plus />New project</Button>
      </div></div>
    {projects === null ? <div className="flex items-center gap-3 py-12 text-muted-foreground"><Loader2 className="h-5 w-5 animate-spin" />Loading CodeHub…</div>
      : projects.length ? <div className="grid gap-4 pt-6 md:grid-cols-2 xl:grid-cols-3">{projects.map((p) => <article key={p.id} className="min-w-0 rounded-lg border border-border bg-card p-5 transition-colors hover:border-primary/40">
        <div className="flex items-start justify-between gap-3"><FolderGit2 className="h-6 w-6 text-primary" /><span className={`font-mono text-[10px] uppercase ${p.deployed_url ? "text-security" : "text-muted-foreground"}`}>{p.deployed_url ? "Published" : "Private"}</span></div>
        <h3 className="mt-4 truncate text-base font-semibold">{p.name}</h3>
        <p className="mt-2 font-mono text-[10px] text-muted-foreground">{Object.keys(p.files ?? {}).length} FILES · {new Date(p.updated_at).toLocaleDateString()}</p>
        {p.deployed_url && <a href={p.deployed_url} target="_blank" rel="noreferrer" className="mt-3 block truncate text-xs text-primary">{p.deployed_url}<ArrowUpRight className="ml-1 inline h-3 w-3" /></a>}
        <div className="mt-4 border-t border-border pt-4"><Button size="sm" variant="outline" onClick={() => setOpenId(p.id)}><FileCode2 />Open code</Button></div>
      </article>)}</div>
      : <div className="py-14 text-center"><FolderGit2 className="mx-auto mb-4 h-10 w-10 text-primary" /><h3 className="text-lg font-medium">No code projects yet</h3><p className="mt-2 text-sm text-muted-foreground">Start a new project or upload a ZIP of your code, images and fonts.</p></div>}
  </section>;
}

function Editor({ project, publishingConfigured, onClose, onChanged }: { project: Project; publishingConfigured: boolean; onClose: () => void; onChanged: () => Promise<void> }) {
  const { user } = useAuth();
  const deploy = useServerFn(deployCodeProject);
  const [name, setName] = useState(project.name);
  const [files, setFiles] = useState<CodeFiles>(project.files ?? {});
  const paths = useMemo(() => Object.keys(files).sort(), [files]);
  const [current, setCurrent] = useState(paths.includes("index.html") ? "index.html" : paths[0] ?? "");
  const [dirty, setDirty] = useState(false);
  const [saving, setSaving] = useState(false);
  const [versions, setVersions] = useState<Version[] | null>(null);
  const [dialog, setDialog] = useState<null | "publish" | "delete">(null);
  const [publishing, setPublishing] = useState(false);
  const [url, setUrl] = useState(project.deployed_url);
  const replaceInput = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (!dirty) return;
    const warn = (e: BeforeUnloadEvent) => { e.preventDefault(); };
    window.addEventListener("beforeunload", warn); return () => window.removeEventListener("beforeunload", warn);
  }, [dirty]);

  const edit = (next: CodeFiles) => { setFiles(next); setDirty(true); };
  const addFile = () => {
    const raw = window.prompt("New file name (e.g. script.js, src/app.tsx or style.css)");
    const path = raw ? cleanPath(raw) : null;
    if (!raw) return;
    if (!path) { toast.error("That file name isn't allowed."); return; }
    if (files[path] !== undefined) { toast.error("A file with that name already exists."); return; }
    if (isBinaryFile(path)) { toast.info("Images, fonts and PDFs are added with Upload ZIP / files."); return; }
    edit({ ...files, [path]: "" }); setCurrent(path);
  };
  const removeFile = (path: string) => {
    if (!window.confirm(`Delete ${path}? You can still restore it from a saved version.`)) return;
    const next = { ...files }; delete next[path]; edit(next); setCurrent(Object.keys(next).sort()[0] ?? "");
  };
  const replaceBinary = async (file: File | undefined) => {
    if (!file || !current || !isBinaryFile(current)) return;
    try {
      edit({ ...files, [current]: toDataUrl(current, await readAsBase64(file)) });
      toast.success(`${current} replaced.`);
    } catch { toast.error("That file could not be read."); }
    finally { if (replaceInput.current) replaceInput.current.value = ""; }
  };
  const save = async () => {
    if (!user) return;
    const invalid = validateFiles(files);
    if (invalid) { toast.error(invalid); return; }
    setSaving(true);
    const { error } = await supabase.from("code_projects").update({ name: name.slice(0, 80) || "Untitled project", files, updated_at: new Date().toISOString() }).eq("id", project.id);
    if (!error) await supabase.from("code_project_versions").insert({ project_id: project.id, user_id: user.id, files, note: "Saved" });
    setSaving(false);
    if (error) { toast.error("Saving failed. Please try again."); return; }
    setDirty(false); setVersions(null); toast.success("Saved. A new version was recorded."); await onChanged();
  };
  const loadVersions = async () => {
    const { data, error } = await supabase.from("code_project_versions").select("id, note, created_at, files").eq("project_id", project.id).order("created_at", { ascending: false }).limit(30);
    if (error) { toast.error("Versions could not load."); return; }
    setVersions((data ?? []) as Version[]);
  };
  const restore = (v: Version) => {
    if (!window.confirm(`Restore the version from ${new Date(v.created_at).toLocaleString()}? Unsaved edits will be replaced. Click Save to keep it.`)) return;
    edit(v.files); setCurrent(Object.keys(v.files).sort()[0] ?? ""); toast.info("Version loaded. Click Save to keep it.");
  };
  const exportZip = async () => {
    const zip = new JSZip();
    for (const [path, body] of Object.entries(files)) {
      const data = parseDataUrl(body);
      if (data) zip.file(path, data.base64, { base64: true });
      else zip.file(path, body);
    }
    const blob = await zip.generateAsync({ type: "blob" });
    const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = `${(name || "project").replace(/[^\w-]+/g, "-")}.zip`; a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  };
  const publish = async () => {
    setPublishing(true);
    try {
      const result = await deploy({ data: { projectId: project.id } });
      if ("error" in result) throw new Error(result.error);
      setUrl(result.url); setDialog(null); toast.success("Published to your Cloudflare account."); await onChanged();
    } catch (e) { toast.error(e instanceof Error ? e.message : "Publishing failed."); }
    finally { setPublishing(false); }
  };
  const remove = async () => {
    const { error } = await supabase.from("code_projects").delete().eq("id", project.id);
    if (error) { toast.error("The project could not be deleted."); return; }
    toast.success("Project deleted from CodeHub."); onClose(); await onChanged();
  };

  const body = files[current] ?? "";
  const binary = current ? isBinaryFile(current) : false;

  return <section className="py-6">
    <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
      <div className="flex min-w-0 flex-1 items-center gap-2"><Button size="icon" variant="ghost" aria-label="Back to CodeHub" onClick={() => { if (!dirty || window.confirm("Leave without saving your changes?")) onClose(); }}><X /></Button><Input aria-label="Project name" value={name} onChange={(e) => { setName(e.target.value); setDirty(true); }} className="max-w-xs" /></div>
      <div className="flex flex-wrap gap-2">
        <Button size="sm" disabled={saving || !dirty} onClick={() => void save()}>{saving ? <Loader2 className="animate-spin" /> : <Save />}{dirty ? "Save" : "Saved"}</Button>
        <Button size="sm" variant="outline" onClick={() => void (versions ? setVersions(null) : loadVersions())}><History />Versions</Button>
        <Button size="sm" variant="outline" onClick={() => void exportZip()}><Download />ZIP</Button>
        <Button size="sm" variant="outline" disabled={!publishingConfigured || dirty} title={dirty ? "Save before publishing" : undefined} onClick={() => setDialog("publish")}><Rocket />{url ? "Republish" : "Publish"}</Button>
        {url && <ConnectDomainButton kind="hub" id={project.id} />}
        <Button size="icon" variant="ghost" aria-label="Delete project" onClick={() => setDialog("delete")}><Trash2 /></Button>
      </div>
    </div>
    {url && <a href={url} target="_blank" rel="noreferrer" className="mt-3 block truncate text-xs text-primary">{url}<ArrowUpRight className="ml-1 inline h-3 w-3" /></a>}
    <div className="mt-4 grid gap-4 lg:grid-cols-[220px_1fr]">
      <aside className="rounded-lg border border-border bg-card p-2">
        <div className="mb-2 flex items-center justify-between px-2 pt-1"><span className="font-mono text-[10px] uppercase text-muted-foreground">Files</span><Button size="icon" variant="ghost" aria-label="Add file" onClick={addFile}><FilePlus2 /></Button></div>
        <ul className="max-h-80 overflow-auto lg:max-h-[520px]">{paths.map((p) => <li key={p} className="group flex items-center"><button type="button" onClick={() => setCurrent(p)} className={`min-w-0 flex-1 truncate rounded px-2 py-1.5 text-left font-mono text-xs ${p === current ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"}`}>{p}</button><button type="button" aria-label={`Delete ${p}`} onClick={() => removeFile(p)} className="px-1 text-muted-foreground opacity-0 hover:text-destructive group-hover:opacity-100 focus:opacity-100"><Trash2 className="h-3.5 w-3.5" /></button></li>)}</ul>
      </aside>
      <div className="min-w-0">
        {current ? <>
          <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
            <p className="font-mono text-xs text-muted-foreground">{current} · {formatBytes(fileBytes(body))}</p>
            {binary && <Button size="sm" variant="outline" onClick={() => replaceInput.current?.click()}><Upload />Replace file</Button>}
          </div>
          <input ref={replaceInput} type="file" accept={ACCEPT} className="hidden" aria-label={`Replace ${current}`} onChange={(e) => void replaceBinary(e.target.files?.[0])} />
          {binary ? (isImageValue(body)
            ? <div className="flex min-h-[520px] items-center justify-center rounded-lg border border-border bg-secondary/30 p-6"><img src={body} alt={current} className="max-h-[520px] max-w-full rounded-md object-contain" /></div>
            : <div className="flex min-h-[200px] flex-col items-center justify-center gap-3 rounded-lg border border-border bg-card p-10 text-center"><ImageOff className="h-8 w-8 text-primary" /><p className="text-sm">This file is stored as-is and will be published unchanged.</p><Button size="sm" variant="outline" onClick={() => replaceInput.current?.click()}><Upload />Replace file</Button></div>)
            : <Textarea aria-label={`Contents of ${current}`} spellCheck={false} value={body} onChange={(e) => edit({ ...files, [current]: e.target.value })} className="min-h-[520px] font-mono text-xs leading-relaxed" onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === "s") { e.preventDefault(); void save(); } }} />}
        </> : <p className="py-10 text-center text-sm text-muted-foreground">No files. Add one to start.</p>}
        {versions && <div className="mt-4 rounded-lg border border-border bg-card p-4"><p className="mb-3 font-mono text-[10px] uppercase text-primary">Version history</p>{versions.length ? <ul className="space-y-2">{versions.map((v) => <li key={v.id} className="flex items-center justify-between gap-3 text-sm"><span>{v.note} · {new Date(v.created_at).toLocaleString()} · {Object.keys(v.files).length} files</span><Button size="sm" variant="ghost" onClick={() => restore(v)}>Restore</Button></li>)}</ul> : <p className="text-sm text-muted-foreground">No versions yet.</p>}</div>}
      </div>
    </div>
    {dialog && <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/90 p-5" role="dialog" aria-modal="true"><div className="w-full max-w-lg rounded-lg border border-border bg-card p-6">
      {dialog === "publish" ? <><h2 className="text-xl font-semibold">{url ? "Replace the published site?" : "Publish this project?"}</h2><p className="mt-4 text-sm text-muted-foreground">All {paths.length} saved files — code, images and fonts — go live on your Cloudflare Pages account and become public. It needs an index.html at the top level. Each publish counts toward Cloudflare's monthly deploy limit.</p>
        <div className="mt-6 flex justify-end gap-2"><Button variant="ghost" disabled={publishing} onClick={() => setDialog(null)}>Cancel</Button><Button disabled={publishing} onClick={() => void publish()}>{publishing ? <Loader2 className="animate-spin" /> : <Check />}Approve publishing</Button></div></>
        : <><h2 className="text-xl font-semibold">Delete “{project.name}”?</h2><p className="mt-4 text-sm text-muted-foreground">This removes the project, its {paths.length} files and all saved versions from CodeHub. It can't be undone. A published site stays on your Cloudflare account.</p>
        <div className="mt-6 flex justify-end gap-2"><Button variant="ghost" onClick={() => setDialog(null)}>Cancel</Button><Button variant="destructive" onClick={() => void remove()}><Trash2 />Delete project</Button></div></>}
    </div></div>}
  </section>;
}