"use client";

import { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { DataTable, type Column } from "@/components/admin/DataTable";
import { FormSheet } from "@/components/admin/FormSheet";
import { ImageDropZone } from "@/components/admin/ImageDropZone";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Clock, Users, Search, CheckCircle2, GripVertical, Trash2, Loader2, Plus } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "sonner";
import { useImageUpload } from "@/hooks/use-image-upload";
import { useDragReorder } from "@/hooks/use-drag-reorder";
import { uploadToCloudinary } from "@/lib/cloudinary";
import {
  getTrainings,
  createTraining,
  updateTraining,
  deleteTraining,
  type Training,
} from "@/services/trainings";
import {
  getAccreditations,
  createAccreditation,
  updateAccreditation,
  deleteAccreditation,
  reorderAccreditations,
  type Accreditation,
} from "@/services/accreditations";
import { useAdminLocale } from "@/hooks/use-admin-locale";

interface FormState {
  training_title: string;
  training_desc: string;
  training_duration: string;
  training_cert: string;
  training_target_audience: string;
  training_link: string;
}

const emptyForm = (): FormState => ({
  training_title: "",
  training_desc: "",
  training_duration: "",
  training_cert: "",
  training_target_audience: "",
  training_link: "",
});

// ─── Accreditations tab ───────────────────────────────────────────────────────

const API_URL = process.env.NEXT_PUBLIC_API_URL || "";

function AccreditationsTabContent() {
  const locale = useAdminLocale();
  const [items, setItems] = useState<Accreditation[]>([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState<Accreditation | null>(null);
  const [isAdding, setIsAdding] = useState(false);
  const [titleValue, setTitleValue] = useState("");
  const [subtitleValue, setSubtitleValue] = useState("");
  const [descriptionValue, setDescriptionValue] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);

  const { preview, file, isDragging, setIsDragging, inputRef, handleFile, onDrop, reset: resetUpload } = useImageUpload();
  const [imageProgress, setImageProgress] = useState<number | null>(null);
  const [imageUploadDone, setImageUploadDone] = useState(false);
  const fetchedRef = useRef(false);

  const { onDragStart, onDragEnter, onDragEnd } = useDragReorder(
    items,
    setItems,
    (reordered) => {
      const positions = reordered.map((a, i) => ({ id: a.id, sort_order: i }));
      reorderAccreditations(positions)
        .then(() => toast.success("Order updated."))
        .catch(() => {});
    },
  );

  useEffect(() => {
    if (fetchedRef.current) return;
    fetchedRef.current = true;
    getAccreditations()
      .then(setItems)
      .finally(() => setLoading(false));
  }, []);

  const resetSheet = () => {
    setEditing(null);
    setIsAdding(false);
    setTitleValue("");
    setSubtitleValue("");
    setDescriptionValue("");
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
  };

  const openEdit = (a: Accreditation) => {
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
    setTitleValue(a.title);
    setSubtitleValue(a.subtitle ?? "");
    setDescriptionValue(a.description ?? "");
    setEditing(a);
  };

  const handleSave = async () => {
    if (!titleValue.trim()) { toast.error("Title is required."); return; }
    setIsSaving(true);

    let imageResult: { secure_url: string; public_id: string } | undefined;
    if (file) {
      try {
        setImageProgress(0);
        imageResult = await uploadToCloudinary(
          file, "image", setImageProgress,
          `${API_URL}/api/accreditations/upload-signature`,
        );
        setImageProgress(null);
        setImageUploadDone(true);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Image upload failed.");
        setImageProgress(null);
        setIsSaving(false);
        return;
      }
    }

    try {
      const baseImagePayload = imageResult
        ? { image_url: imageResult.secure_url, image_public_id: imageResult.public_id }
        : {};

      if (isAdding) {
        const created = await createAccreditation({
          title: titleValue.trim(),
          subtitle: subtitleValue.trim() || null,
          description: descriptionValue.trim() || null,
          sort_order: items.length,
          ...baseImagePayload,
        });
        setItems((prev) => [...prev, created]);
        toast.success("Accreditation added.");
      } else {
        const updated = await updateAccreditation(editing!.id, {
          title: { [locale]: titleValue.trim() },
          subtitle: subtitleValue.trim() ? { [locale]: subtitleValue.trim() } : null,
          description: descriptionValue.trim() ? { [locale]: descriptionValue.trim() } : null,
          ...baseImagePayload,
        });
        setItems((prev) => prev.map((a) => (a.id === updated.id ? updated : a)));
        toast.success("Accreditation updated.");
      }
      resetSheet();
    } catch {
      // interceptor shows error toast
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (e: React.MouseEvent, a: Accreditation) => {
    e.stopPropagation();
    if (deletingId) return;
    setDeletingId(a.id);
    try {
      await deleteAccreditation(a.id);
      setItems((prev) => prev.filter((x) => x.id !== a.id));
      toast.success("Accreditation removed.");
    } catch {
      // interceptor shows error toast
    } finally {
      setDeletingId(null);
    }
  };

  return (
    <>
      <div className="flex items-center justify-between mb-6">
        <p className="text-sm text-muted-foreground">Manage accreditations &amp; memberships. Drag to reorder.</p>
        <Button size="sm" className="gap-2" onClick={() => { resetSheet(); setIsAdding(true); }}>
          <Plus className="h-4 w-4" /> Add Accreditation
        </Button>
      </div>

      {loading ? (
        <div className="bg-card rounded-lg border shadow-sm">
          <div className="divide-y">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="flex items-center gap-4 px-4 py-3">
                <Skeleton className="h-4 w-4 shrink-0" />
                <Skeleton className="h-10 w-10 rounded shrink-0" />
                <div className="flex-1 space-y-1.5">
                  <Skeleton className="h-3.5 w-40" />
                  <Skeleton className="h-3 w-56" />
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : items.length === 0 ? (
        <div className="text-center py-12 text-sm text-muted-foreground">
          No accreditations yet. Click &quot;Add Accreditation&quot; to get started.
        </div>
      ) : (
        <div className="bg-card rounded-lg border shadow-sm">
          <div className="divide-y">
            {items.map((a, index) => (
              <div
                key={a.id}
                draggable
                onDragStart={() => onDragStart(index)}
                onDragEnter={() => onDragEnter(index)}
                onDragOver={(e) => e.preventDefault()}
                onDragEnd={onDragEnd}
                className="flex items-center gap-4 px-4 py-3 group cursor-pointer hover:bg-muted/50 transition-colors"
                onClick={() => openEdit(a)}
              >
                <GripVertical className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0 cursor-grab" />
                {a.image_url ? (
                  <Image src={a.image_url} alt={a.title} width={40} height={40} className="h-10 w-10 object-contain rounded shrink-0" />
                ) : (
                  <div className="h-10 w-10 rounded bg-muted shrink-0" />
                )}
                <div className="flex-1 min-w-0">
                  <div className="font-medium text-sm">{a.title}</div>
                  {a.subtitle && <div className="text-xs text-muted-foreground">{a.subtitle}</div>}
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity text-destructive hover:text-destructive shrink-0"
                  disabled={deletingId === a.id}
                  onClick={(e) => handleDelete(e, a)}
                >
                  {deletingId === a.id
                    ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    : <Trash2 className="h-3.5 w-3.5" />}
                </Button>
              </div>
            ))}
          </div>
        </div>
      )}
      <p className="text-xs text-muted-foreground mt-3">
        {items.length} accreditation{items.length !== 1 ? "s" : ""} · Click to edit, drag to reorder
      </p>

      <FormSheet
        open={!!editing || isAdding}
        onOpenChange={(open) => { if (!open) resetSheet(); }}
        title={editing ? `Edit: ${editing.title}` : "New Accreditation"}
        onSave={handleSave}
        saveLabel={editing ? "Save Changes" : "Add Accreditation"}
        loading={isSaving}
      >
        <div className="space-y-2">
          <Label>Title</Label>
          <Input value={titleValue} onChange={(e) => setTitleValue(e.target.value)} placeholder="e.g. ISO 9001 Certified" />
        </div>
        <div className="space-y-2">
          <Label>Subtitle</Label>
          <Input value={subtitleValue} onChange={(e) => setSubtitleValue(e.target.value)} placeholder="e.g. Quality Management" />
        </div>
        <div className="space-y-2">
          <Label>Description</Label>
          <Textarea value={descriptionValue} onChange={(e) => setDescriptionValue(e.target.value)} rows={3} placeholder="Optional description…" />
        </div>
        <div className="space-y-2">
          <Label>Image</Label>
          <input
            ref={inputRef}
            type="file"
            accept="image/jpeg,image/png,image/webp,image/svg+xml"
            className="hidden"
            onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }}
          />
          <ImageDropZone
            preview={preview}
            fallback={editing?.image_url ?? undefined}
            isDragging={isDragging}
            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
            onDragLeave={() => setIsDragging(false)}
            onDrop={onDrop}
            onClick={() => inputRef.current?.click()}
          />
          {imageProgress !== null && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Uploading image…</span>
                <span>{imageProgress}%</span>
              </div>
              <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                <div className="h-full bg-primary rounded-full transition-all duration-150" style={{ width: `${imageProgress}%` }} />
              </div>
            </div>
          )}
          {imageUploadDone && imageProgress === null && (
            <div className="flex items-center gap-1.5 text-xs text-emerald-600">
              <CheckCircle2 className="h-3.5 w-3.5" />
              <span>Image uploaded</span>
            </div>
          )}
        </div>
      </FormSheet>
    </>
  );
}

// ─── Main page ────────────────────────────────────────────────────────────────

export default function TrainingAdmin() {
  const locale = useAdminLocale();
  const [accreditationsActivated, setAccreditationsActivated] = useState(false);

  const [programs, setPrograms] = useState<Training[]>([]);
  const [loadingData, setLoadingData] = useState(true);
  const [search, setSearch] = useState("");
  const [editing, setEditing] = useState<Training | null>(null);
  const [isAdding, setIsAdding] = useState(false);
  const [form, setForm] = useState<FormState>(emptyForm());
  const [isSaving, setIsSaving] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);

  const { preview, file, isDragging, setIsDragging, inputRef, handleFile, onDrop, reset: resetUpload } = useImageUpload();

  const [imageProgress, setImageProgress] = useState<number | null>(null);
  const [imageUploadDone, setImageUploadDone] = useState(false);

  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const fetchPrograms = (query?: string) => {
    setLoadingData(true);
    getTrainings(query)
      .then(setPrograms)
      .finally(() => setLoadingData(false));
  };

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

  const handleSearchChange = (value: string) => {
    setSearch(value);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => fetchPrograms(value), 400);
  };

  const resetSheet = () => {
    setEditing(null);
    setIsAdding(false);
    setForm(emptyForm());
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
  };

  const openEdit = (p: Training) => {
    resetUpload();
    setImageProgress(null);
    setImageUploadDone(false);
    setForm({
      training_title: p.training_title,
      training_desc: p.training_desc,
      training_duration: p.training_duration,
      training_cert: p.training_cert ?? "",
      training_target_audience: p.training_target_audience,
      training_link: p.training_link,
    });
    setEditing(p);
  };

  const set = (key: keyof FormState, value: string | boolean) =>
    setForm((prev) => ({ ...prev, [key]: value }));

  const handleSave = async () => {
    if (!form.training_title.trim()) { toast.error("Title is required."); return; }
    if (!form.training_desc.trim()) { toast.error("Description is required."); return; }
    if (!form.training_duration.trim()) { toast.error("Duration is required."); return; }
    if (!form.training_target_audience.trim()) { toast.error("Target audience is required."); return; }
    if (!form.training_link.trim()) { toast.error("Training link is required."); return; }

    setIsSaving(true);

    let imageResult: { secure_url: string; public_id: string } | undefined;
    if (file) {
      try {
        setImageProgress(0);
        imageResult = await uploadToCloudinary(file, "image", setImageProgress);
        setImageProgress(null);
        setImageUploadDone(true);
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Image upload failed.");
        setImageProgress(null);
        setIsSaving(false);
        return;
      }
    }

    try {
      if (isAdding) {
        const created = await createTraining({
          ...form,
          training_image_url: imageResult?.secure_url,
          training_image_public_id: imageResult?.public_id,
        });
        setPrograms((prev) => [...prev, created]);
        toast.success("Training program added.");
      } else {
        const updated = await updateTraining(editing!.id, {
          training_title: { [locale]: form.training_title },
          training_desc: { [locale]: form.training_desc },
          training_duration: { [locale]: form.training_duration },
          training_cert: { [locale]: form.training_cert },
          training_target_audience: { [locale]: form.training_target_audience },
          training_link: form.training_link,
          training_image_url: imageResult?.secure_url,
          training_image_public_id: imageResult?.public_id,
        });
        setPrograms((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
        toast.success("Training program updated.");
      }
      resetSheet();
    } catch {
      // interceptor shows error toast
    } finally {
      setIsSaving(false);
    }
  };

  const handleDelete = async (p: Training) => {
    if (deletingId) return;
    setDeletingId(p.id);
    try {
      await deleteTraining(p.id, p.training_image_public_id);
      setPrograms((prev) => prev.filter((t) => t.id !== p.id));
      toast.success("Training program removed.");
    } catch {
      // interceptor shows error toast
    } finally {
      setDeletingId(null);
    }
  };

  const columns: Column<Training>[] = [
    {
      key: "training_title",
      label: "Program",
      render: (p) => (
        <div className="flex items-center gap-3">
          {p.training_image_url && (
            <Image src={p.training_image_url} alt={p.training_title} width={56} height={40} className="h-10 w-14 object-cover rounded" />
          )}
          <div>
            <div className="font-medium text-sm">{p.training_title}</div>
            <div className="text-xs text-muted-foreground truncate max-w-[200px]">{p.training_desc}</div>
          </div>
        </div>
      ),
    },
    {
      key: "training_duration",
      label: "Duration",
      render: (p) => (
        <div className="flex items-center gap-1.5 text-sm">
          <Clock className="h-3 w-3 text-muted-foreground" />
          {p.training_duration}
        </div>
      ),
      className: "w-28",
    },
    {
      key: "training_cert",
      label: "Certification",
      render: (p) =>
        p.training_cert ? (
          <Badge variant="secondary" className="text-[10px]">{p.training_cert}</Badge>
        ) : (
          <Badge variant="outline" className="text-[10px]">None</Badge>
        ),
    },
    {
      key: "training_target_audience",
      label: "Audience",
      render: (p) => (
        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
          <Users className="h-3 w-3" />
          {p.training_target_audience}
        </div>
      ),
    },
  ];

  const handleTabChange = (value: string) => {
    if (value === "accreditations") setAccreditationsActivated(true);
  };

  return (
    <div className="p-6 lg:p-8 max-w-7xl mx-auto">
      <div className="mb-8">
        <h1 className="text-2xl font-bold tracking-tight text-foreground">Training & Accreditations</h1>
        <p className="text-sm text-muted-foreground mt-1">
          Manage training programs, accreditations, and memberships.
        </p>
      </div>

      <Tabs defaultValue="programs" onValueChange={handleTabChange}>
        <TabsList>
          <TabsTrigger value="programs">Training Programs</TabsTrigger>
          <TabsTrigger value="accreditations">Accreditations &amp; Memberships</TabsTrigger>
        </TabsList>

        {/* ── Training Programs tab ── */}
        <TabsContent value="programs" className="mt-6">
          <div className="flex items-center justify-between mb-4">
            <div className="relative max-w-sm">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Search programs…"
                value={search}
                onChange={(e) => handleSearchChange(e.target.value)}
                className="pl-9 h-9"
              />
            </div>
            <Button size="sm" className="gap-2" onClick={() => { setForm(emptyForm()); setIsAdding(true); }}>
              <Plus className="h-4 w-4" /> Add Program
            </Button>
          </div>

          {loadingData ? (
            <div className="bg-card rounded-lg border overflow-hidden">
              <div className="divide-y">
                {Array.from({ length: 6 }).map((_, i) => (
                  <div key={i} className="flex items-center gap-4 px-4 py-3">
                    <Skeleton className="h-10 w-14 rounded shrink-0" />
                    <div className="flex-1 space-y-1.5">
                      <Skeleton className="h-3.5 w-40" />
                      <Skeleton className="h-3 w-56" />
                    </div>
                    <Skeleton className="h-3.5 w-16 shrink-0" />
                    <Skeleton className="h-5 w-24 rounded-full shrink-0" />
                    <Skeleton className="h-3.5 w-28 shrink-0" />
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <DataTable
              data={programs}
              columns={columns}
              onEdit={openEdit}
              onDelete={handleDelete}
            />
          )}
        </TabsContent>

        {/* ── Accreditations tab (lazy) ── */}
        <TabsContent value="accreditations" className="mt-6">
          {accreditationsActivated && <AccreditationsTabContent />}
        </TabsContent>
      </Tabs>

      {/* Training program add/edit sheet */}
      <FormSheet
        open={!!editing || isAdding}
        onOpenChange={(open) => { if (!open) resetSheet(); }}
        title={editing ? `Edit: ${editing.training_title}` : "New Program"}
        onSave={handleSave}
        saveLabel={editing ? "Save Changes" : "Add Program"}
        loading={isSaving}
      >
        <div className="space-y-2">
          <Label>Title</Label>
          <Input value={form.training_title} onChange={(e) => set("training_title", e.target.value)} />
        </div>
        <div className="space-y-2">
          <Label>Description</Label>
          <Textarea value={form.training_desc} onChange={(e) => set("training_desc", e.target.value)} rows={3} />
        </div>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label>Duration</Label>
            <Input value={form.training_duration} onChange={(e) => set("training_duration", e.target.value)} placeholder="e.g. 3 days" />
          </div>
          <div className="space-y-2">
            <Label>Certification</Label>
            <Input value={form.training_cert} onChange={(e) => set("training_cert", e.target.value)} placeholder="e.g. IADC Accredited" />
          </div>
        </div>
        <div className="space-y-2">
          <Label>Target Audience</Label>
          <Input value={form.training_target_audience} onChange={(e) => set("training_target_audience", e.target.value)} />
        </div>
        <div className="space-y-2">
          <Label>Training Link</Label>
          <Input
            type="url"
            value={form.training_link}
            onChange={(e) => set("training_link", e.target.value)}
            placeholder="https://example.com/training/..."
          />
        </div>
        <div className="space-y-2">
          <Label>Image</Label>
          <input
            ref={inputRef}
            type="file"
            accept="image/jpeg,image/png,image/webp,image/svg+xml"
            className="hidden"
            onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); }}
          />
          <ImageDropZone
            preview={preview}
            fallback={editing?.training_image_url}
            isDragging={isDragging}
            onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
            onDragLeave={() => setIsDragging(false)}
            onDrop={onDrop}
            onClick={() => inputRef.current?.click()}
          />
          {imageProgress !== null && (
            <div className="space-y-1">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Uploading image…</span>
                <span>{imageProgress}%</span>
              </div>
              <div className="h-1.5 w-full rounded-full bg-muted overflow-hidden">
                <div className="h-full bg-primary rounded-full transition-all duration-150" style={{ width: `${imageProgress}%` }} />
              </div>
            </div>
          )}
          {imageUploadDone && imageProgress === null && (
            <div className="flex items-center gap-1.5 text-xs text-emerald-600">
              <CheckCircle2 className="h-3.5 w-3.5" />
              <span>Image uploaded</span>
            </div>
          )}
        </div>
      </FormSheet>
    </div>
  );
}