// src/components/storage/DetailsModal.jsx
import React from "react";
import { IoFolderOpen } from "react-icons/io5";
import { FaStar } from "react-icons/fa";
import ModalShell from "./ModalShell";
import {
  FileTypeIcon,
  formatDate,
  formatSize,
  getEffectiveHex,
  getFileExtension,
  getFileId,
  getFolderId,
  getItemColorStyle,
  hexToRgba,
} from "../../utils/storage";

export default function DetailsModal({ state, onClose }) {
  const { open, type, item } = state || {};
  if (!open) return null;

  const title = type === "folder" ? "جزئیات پوشه" : "جزئیات فایل";

  return (
    <ModalShell open={open} title={title} onClose={onClose} maxWidth="max-w-lg">
      {!item ? null : type === "file" ? (
        <FileDetails item={item} />
      ) : (
        <FolderDetails item={item} />
      )}
    </ModalShell>
  );
}

function FileDetails({ item }) {
  const ext = getFileExtension(item?.name || "");
  const size = formatSize(item?.current_version?.size);
  const mime = item?.current_version?.mime_type || "-";
  const created = formatDate(item?.created_at);
  const updated = formatDate(item?.updated_at);
  const owner = item?.owner_email || "-";
  const descri = item?.description || "-";
  const tagi = item?.tags || "-";
  const location = item?.folderPath || "ریشه";

  const hex = getEffectiveHex(item);

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-3">
        <div
          className="w-12 h-12 rounded-2xl border border-black/10 dark:border-white/10 flex items-center justify-center"
          style={{
            background: hexToRgba(hex, 0.16),
            borderColor: hexToRgba(hex, 0.35),
          }}
        >
          <FileTypeIcon ext={ext} className="h-6 w-6" style={getItemColorStyle(item)} />
        </div>
        <div className="min-w-0">
          <p className="font-extrabold text-black dark:text-white truncate flex items-center gap-2">
            {item?.is_starred && <FaStar className="text-yellow-500 h-4 w-4" />}
            {item?.name || "-"}
          </p>
          <p className="text-xs text-black/60 dark:text-white/70 truncate">{mime}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm font-semibold">
        <Box label="حجم" value={size} />
        <Box label="مالک" value={owner} truncate />
        <Box label="مسیر" value={location} truncate />
        <Box label="آخرین تغییر" value={updated} />
        <Box label="تاریخ ایجاد" value={created} />
        <Box label="تگ‌ها" value={tagi} />
        <Box label="توضیحات" value={descri} span2 />
      </div>

      <p className="text-xs text-black/60 dark:text-white/70">
        شناسه: <span className="font-mono">{String(getFileId(item) || "-")}</span>
      </p>
    </div>
  );
}

function FolderDetails({ item }) {
  const created = formatDate(item?.created_at);
  const updated = formatDate(item?.updated_at);
  const owner = item?.owner_email || "-";
  const filesCount = item?.files?.length ?? item?.files_count ?? item?.filesCount ?? 0;
  const foldersCount = item?.folders?.length ?? item?.folders_count ?? item?.foldersCount ?? 0;

  const hex = getEffectiveHex(item);

  return (
    <div className="space-y-3">
      <div className="flex items-center gap-3">
        <div
          className="w-12 h-12 rounded-2xl border border-black/10 dark:border-white/10 flex items-center justify-center"
          style={{
            background: hexToRgba(hex, 0.16),
            borderColor: hexToRgba(hex, 0.35),
          }}
        >
          <IoFolderOpen className="h-6 w-6" style={{ color: hex }} />
        </div>
        <div className="min-w-0">
          <p className="font-extrabold text-black dark:text-white truncate flex items-center gap-2">
            {item?.is_starred && <FaStar className="text-yellow-500 h-4 w-4" />}
            {item?.name || "-"}
          </p>
          <p className="text-xs text-black/60 dark:text-white/70 truncate">{owner}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm font-semibold">
        <Box label="تعداد فایل‌ها" value={filesCount} />
        <Box label="تعداد پوشه‌ها" value={foldersCount} />
        <Box label="تاریخ ایجاد" value={created} />
        <Box label="آخرین تغییر" value={updated} />
      </div>

      <p className="text-xs text-black/60 dark:text-white/70">
        شناسه: <span className="font-mono">{String(getFolderId(item) || "-")}</span>
      </p>
    </div>
  );
}

function Box({ label, value, truncate = false, span2 = false }) {
  return (
    <div
      className={`rounded-xl border border-black/10 dark:border-white/10 p-3 bg-black/5 dark:bg-white/5 ${
        span2 ? "sm:col-span-2" : ""
      }`}
    >
      <p className="text-black/60 dark:text-white/70 text-xs">{label}</p>
      <p className={`text-black dark:text-white ${truncate ? "truncate" : ""}`}>{value}</p>
    </div>
  );
}
