"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

interface LessonFile {
  id: string;
  name: string;
  url: string;
  size: number;
}

export function LessonFilesManager({ lessonId, initialFiles }: { lessonId: string; initialFiles: LessonFile[] }) {
  const [files, setFiles] = useState(initialFiles);
  const [uploading, setUploading] = useState(false);

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    const fd = new FormData();
    fd.append("file", file);
    fd.append("lessonId", lessonId);
    const res = await fetch("/api/admin/lesson-files", { method: "POST", body: fd });
    const created = await res.json();
    if (created.id) setFiles((prev) => [...prev, created]);
    setUploading(false);
    e.target.value = "";
  }

  async function handleDelete(fileId: string) {
    if (!confirm("Удалить файл?")) return;
    await fetch("/api/admin/lesson-files", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ fileId }),
    });
    setFiles((prev) => prev.filter((f) => f.id !== fileId));
  }

  function formatSize(bytes: number) {
    if (bytes < 1024) return `${bytes} Б`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} КБ`;
    return `${(bytes / 1024 / 1024).toFixed(1)} МБ`;
  }

  return (
    <div className="space-y-3">
      {files.length > 0 && (
        <div className="space-y-2">
          {files.map((f) => (
            <div key={f.id} className="flex items-center gap-3 px-3 py-2.5 text-sm" style={{ border: "2px solid var(--border)", background: "var(--color-surface)" }}>
              <span className="text-base">📎</span>
              <a href={f.url} target="_blank" rel="noopener noreferrer" className="flex-1 underline font-medium">{f.name}</a>
              <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>{formatSize(f.size)}</span>
              <button onClick={() => handleDelete(f.id)} className="text-xs" style={{ color: "oklch(0.577 0.245 27.325)" }}>
                Удалить
              </button>
            </div>
          ))}
        </div>
      )}
      <div className="flex items-center gap-3">
        <label className="btn-aubade text-xs cursor-pointer">
          {uploading ? "Загрузка..." : "+ Добавить файл"}
          <input type="file" className="sr-only" onChange={handleUpload} disabled={uploading} />
        </label>
        <span className="text-xs" style={{ color: "var(--muted-foreground)" }}>PDF, ZIP, DOCX, XLSX — до 100 МБ</span>
      </div>
    </div>
  );
}