"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { AppShell } from "@/components/layout/AppShell";
import { Button, Card, CardContent, ConfirmDialog, Input, Modal, PageHeader } from "@/components/ui/index";
import { useLanguage } from "@/i18n/LanguageContext";
import { Download, Eye, File, ImageIcon, RefreshCw, Trash2, Upload } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
import { hasPermission } from "@/lib/permissions";

function isImage(name: string) {
  const lower = name.toLowerCase();
  return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".svg"].some((ext) => lower.endsWith(ext));
}

function formatFileSize(bytes: number, language: "ar" | "en") {
  if (!Number.isFinite(bytes) || bytes <= 0) return language === "ar" ? "0 بايت" : "0 B";
  const units = language === "ar" ? ["بايت", "ك.ب", "م.ب", "ج.ب"] : ["B", "KB", "MB", "GB"];
  let size = bytes;
  let idx = 0;
  while (size >= 1024 && idx < units.length - 1) {
    size /= 1024;
    idx += 1;
  }
  const value = size >= 10 || idx === 0 ? Math.round(size) : Number(size.toFixed(1));
  return `${value} ${units[idx]}`;
}

export default function UtilitiesMediaPage() {
  const { user } = useAuth();
  const { language } = useLanguage();
  const isArabic = language === "ar";
  const canRead = !!user && hasPermission(user.role, "media:read");
  const canCreate = !!user && hasPermission(user.role, "media:create");
  const canDelete = !!user && hasPermission(user.role, "media:delete");
  const [items, setItems] = useState<Array<{ name: string; url: string; size: number; createdAt: string }>>([]);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState<File | null>(null);
  const [uploading, setUploading] = useState(false);
  const [loading, setLoading] = useState(true);
  const [previewItem, setPreviewItem] = useState<{ name: string; url: string } | null>(null);
  const [deleteName, setDeleteName] = useState<string | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  const load = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/media");
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      setItems(json.data ?? []);
    } catch (e: any) {
      toast.error(e.message ?? (isArabic ? "تعذر تحميل الوسائط" : "Failed to load media"));
      setItems([]);
    } finally {
      setLoading(false);
    }
  };

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

  const upload = async () => {
    if (!selected) return;
    setUploading(true);
    try {
      const form = new FormData();
      form.append("file", selected);
      const res = await fetch("/api/media", { method: "POST", body: form });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      setSelected(null);
      toast.success(isArabic ? "تم رفع الملف" : "File uploaded");
      load();
    } catch (e: any) {
      toast.error(e.message ?? (isArabic ? "تعذر رفع الملف" : "Failed to upload"));
    } finally {
      setUploading(false);
    }
  };

  const remove = async (name: string) => {
    setIsDeleting(true);
    try {
      const res = await fetch(`/api/media/${encodeURIComponent(name)}`, { method: "DELETE" });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error ?? "Failed");
      toast.success(isArabic ? "تم حذف الملف" : "File deleted");
      setDeleteName(null);
      load();
    } catch (e: any) {
      toast.error(e.message ?? (isArabic ? "تعذر حذف الملف" : "Failed to delete"));
    } finally {
      setIsDeleting(false);
    }
  };

  const summary = useMemo(() => {
    const withImages = items.filter((i) => isImage(i.name)).length;
    const totalSize = items.reduce((sum, i) => sum + Number(i.size || 0), 0);
    return { total: items.length, withImages, totalSize };
  }, [items]);

  const filtered = useMemo(() => {
    if (!search.trim()) return items;
    const q = search.toLowerCase();
    return items.filter((i) => i.name.toLowerCase().includes(q));
  }, [items, search]);

  return (
    <AppShell breadcrumbs={[{ label: isArabic ? "الوسائط" : "Media" }]}>
      {!canRead ? (
        <Card>
          <CardContent className="py-10 text-center text-muted-foreground">
            {isArabic ? "ليس لديك صلاحية الوصول إلى هذا القسم." : "You do not have permission to access this section."}
          </CardContent>
        </Card>
      ) : (
      <>
      <PageHeader
        title={isArabic ? "الوسائط" : "Media"}
        description={isArabic ? "رفع الملفات وحفظها داخل النظام." : "Upload files and keep them in your media library."}
      />

      <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
        <Card>
          <CardContent className="py-4">
            <p className="text-xs text-muted-foreground">{isArabic ? "إجمالي الملفات" : "Total Files"}</p>
            <p className="text-2xl font-semibold mt-1">{summary.total}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="py-4">
            <p className="text-xs text-muted-foreground">{isArabic ? "ملفات الصور" : "Image Files"}</p>
            <p className="text-2xl font-semibold mt-1">{summary.withImages}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="py-4">
            <p className="text-xs text-muted-foreground">{isArabic ? "الحجم الكلي" : "Total Size"}</p>
            <p className="text-2xl font-semibold mt-1">{formatFileSize(summary.totalSize, language)}</p>
          </CardContent>
        </Card>
      </div>

      <Card className="mb-5">
        <CardContent className="pt-5 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 items-end">
            <Input
              label={isArabic ? "بحث" : "Search"}
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder={isArabic ? "ابحث باسم الملف..." : "Search by file name..."}
            />
            <div className="space-y-1.5">
              <p className="text-sm font-medium">{isArabic ? "اختيار ملف" : "Choose file"}</p>
              <input
                ref={fileInputRef}
                type="file"
                className="hidden"
                onChange={(e) => setSelected(e.target.files?.[0] ?? null)}
              />
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className="w-full h-10 rounded-lg border border-border bg-background px-3 text-sm text-start hover:bg-accent/40 transition-colors"
              >
                {selected?.name ?? (isArabic ? "اضغط لاختيار ملف..." : "Click to choose a file...")}
              </button>
            </div>
            <div className="flex gap-2">
              <Button type="button" onClick={upload} loading={uploading} disabled={!selected || !canCreate} className="flex-1">
                <Upload className="w-4 h-4" /> {isArabic ? "رفع الملف" : "Upload File"}
              </Button>
              <Button type="button" variant="outline" onClick={load} disabled={loading}>
                <RefreshCw className="w-4 h-4" />
              </Button>
            </div>
          </div>
          <div className="text-sm rounded-lg border border-dashed border-border bg-muted/30 px-3 py-2 text-muted-foreground">
            {selected
              ? isArabic
                ? `الملف المحدد: ${selected.name} (${formatFileSize(selected.size, language)})`
                : `Selected file: ${selected.name} (${formatFileSize(selected.size, language)})`
              : isArabic
                ? "اختر ملفاً من جهازك ثم اضغط رفع."
                : "Choose a file from your device then click upload."}
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
        {loading ? (
          <Card className="col-span-full">
            <CardContent className="py-10 text-center text-muted-foreground">{isArabic ? "جاري التحميل..." : "Loading..."}</CardContent>
          </Card>
        ) : filtered.length === 0 ? (
          <Card className="col-span-full">
            <CardContent className="py-10 text-center text-muted-foreground">{isArabic ? "لا توجد وسائط" : "No media found"}</CardContent>
          </Card>
        ) : (
          filtered.map((item) => (
            <Card key={item.name} className="overflow-hidden border-border/70 hover:shadow-md transition-shadow">
              <CardContent className="p-0">
                <div className="aspect-[4/3] bg-muted/60 flex items-center justify-center overflow-hidden">
                  {isImage(item.name) ? (
                    <img src={item.url} alt={item.name} className="w-full h-full object-cover hover:scale-[1.02] transition-transform" />
                  ) : (
                    <div className="text-center">
                      <File className="w-7 h-7 mx-auto text-muted-foreground mb-1" />
                      <p className="text-[11px] text-muted-foreground">{isArabic ? "ملف" : "File"}</p>
                    </div>
                  )}
                </div>
                <div className="p-3">
                  <div className="flex items-start justify-between gap-2">
                    <p className="text-xs font-medium truncate" title={item.name}>
                      {item.name}
                    </p>
                    {isImage(item.name) ? <ImageIcon className="w-3.5 h-3.5 text-muted-foreground shrink-0" /> : null}
                  </div>
                  <p className="text-[11px] text-muted-foreground mt-1">{formatFileSize(item.size, language)}</p>
                  <p className="text-[11px] text-muted-foreground">
                    {new Date(item.createdAt).toLocaleDateString(isArabic ? "ar-SA" : "en-US")}
                  </p>
                  <div className="mt-2 flex items-center gap-2">
                    <button
                      type="button"
                      onClick={() => setPreviewItem({ name: item.name, url: item.url })}
                      className="inline-flex items-center gap-1 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:bg-accent/60"
                      title={isArabic ? "معاينة" : "Preview"}
                    >
                      <Eye className="w-3 h-3" />
                      {isArabic ? "معاينة" : "Preview"}
                    </button>
                    <a
                      href={item.url}
                      download={item.name}
                      className="inline-flex items-center gap-1 text-[11px] rounded-md border border-border px-2 py-1 text-muted-foreground hover:text-foreground hover:bg-accent/60"
                      title={isArabic ? "تحميل" : "Download"}
                    >
                      <Download className="w-3 h-3" />
                      {isArabic ? "تحميل" : "Download"}
                    </a>
                    {canDelete && (
                    <button
                      className="inline-flex items-center gap-1 text-[11px] rounded-md border border-destructive/30 px-2 py-1 text-destructive hover:bg-destructive/10"
                      onClick={() => setDeleteName(item.name)}
                      title={isArabic ? "حذف" : "Delete"}
                    >
                      <Trash2 className="w-3 h-3" />
                      {isArabic ? "حذف" : "Delete"}
                    </button>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>
      <Modal
        open={!!previewItem}
        onClose={() => setPreviewItem(null)}
        title={isArabic ? "معاينة الملف" : "File Preview"}
        description={previewItem?.name}
      >
        <div className="p-4">
          {previewItem ? (
            isImage(previewItem.name) ? (
              <img src={previewItem.url} alt={previewItem.name} className="w-full max-h-[70vh] object-contain rounded-lg bg-muted/30" />
            ) : (
              <iframe
                src={previewItem.url}
                title={previewItem.name}
                className="w-full h-[70vh] rounded-lg border border-border bg-background"
              />
            )
          ) : null}
        </div>
      </Modal>
      <ConfirmDialog
        open={!!deleteName}
        onClose={() => setDeleteName(null)}
        onConfirm={() => deleteName && remove(deleteName)}
        isLoading={isDeleting}
        title={isArabic ? "حذف الملف" : "Delete File"}
        description={
          isArabic
            ? "هل أنت متأكد من حذف هذا الملف؟ لا يمكن التراجع عن هذا الإجراء."
            : "Are you sure you want to delete this file? This action cannot be undone."
        }
        confirmLabel={isArabic ? "حذف" : "Delete"}
        variant="destructive"
      />
      </>
      )}
    </AppShell>
  );
}