"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { Plus, Trash2, Edit2, Users, UserPlus, UserMinus } from "lucide-react";
import Button from "../ui/Button";
import Modal from "../ui/Modal";
import UserAvatar from "../ui/UserAvatar";
import { EmptyState } from "../ui/PageHeader";
import toast from "react-hot-toast";
import { formatFileSize } from "@/lib/utils";

interface MemberData {
  id: string;
  user: { id: string; name: string | null; username: string | null };
}

interface SpaceData {
  id: string;
  name: string;
  quotaBytes: number;
  usedBytes: number;
  createdAt: string;
  _count: { members: number; folders: number };
  members: MemberData[];
}

interface UserOption {
  id: string;
  name: string | null;
  username: string | null;
}

const inputClasses = "field h-11 mb-4";

export default function SharedSpaceManagement() {
  const [spaces, setSpaces] = useState<SpaceData[]>([]);
  const [users, setUsers] = useState<UserOption[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreate, setShowCreate] = useState(false);
  const [editSpace, setEditSpace] = useState<SpaceData | null>(null);
  const [form, setForm] = useState({ name: "", memberIds: [] as string[] });
  const [toDelete, setToDelete] = useState<SpaceData | null>(null);

  const fetchData = async () => {
    const [spacesRes, usersRes] = await Promise.all([
      fetch("/api/shared-spaces"),
      fetch("/api/users"),
    ]);
    if (spacesRes.ok) setSpaces(await spacesRes.json());
    if (usersRes.ok) setUsers(await usersRes.json());
    setLoading(false);
  };

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

  const handleCreate = async () => {
    const res = await fetch("/api/shared-spaces", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(form),
    });
    if (res.ok) {
      toast.success("Espace créé");
      setShowCreate(false);
      setForm({ name: "", memberIds: [] });
      fetchData();
    } else {
      toast.error("Erreur lors de la création");
    }
  };

  const handleDelete = async () => {
    if (!toDelete) return;
    const res = await fetch(`/api/shared-spaces/${toDelete.id}`, { method: "DELETE" });
    setToDelete(null);
    if (res.ok) { toast.success("Espace supprimé"); fetchData(); }
    else toast.error("Erreur");
  };

  const handleRename = async () => {
    if (!editSpace) return;
    const res = await fetch(`/api/shared-spaces/${editSpace.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: editSpace.name }),
    });
    if (res.ok) { toast.success("Renommé"); setEditSpace(null); fetchData(); }
    else toast.error("Erreur");
  };

  const handleAddMember = async (spaceId: string, userId: string) => {
    const res = await fetch(`/api/shared-spaces/${spaceId}/members`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId }),
    });
    if (res.ok) { toast.success("Membre ajouté"); fetchData(); }
    else toast.error("Déjà membre ou erreur");
  };

  const handleRemoveMember = async (spaceId: string, userId: string) => {
    const res = await fetch(`/api/shared-spaces/${spaceId}/members`, {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId }),
    });
    if (res.ok) { toast.success("Membre retiré"); fetchData(); }
    else toast.error("Erreur");
  };

  const toggleMember = (userId: string) => {
    setForm((f) => ({
      ...f,
      memberIds: f.memberIds.includes(userId)
        ? f.memberIds.filter((id) => id !== userId)
        : [...f.memberIds, userId],
    }));
  };

  if (loading) {
    return (
      <div className="grid gap-4 lg:grid-cols-2">
        {[0, 1].map((i) => (
          <div key={i} className="card p-5 animate-pulse space-y-4">
            <div className="flex items-center gap-3"><div className="w-10 h-10 rounded-2xl bg-gray-200 dark:bg-white/10" /><div className="flex-1 space-y-2"><div className="h-3 w-1/2 rounded bg-gray-200 dark:bg-white/10" /><div className="h-2 w-1/3 rounded bg-gray-200 dark:bg-white/10" /></div></div>
            <div className="h-1.5 rounded-full bg-gray-200 dark:bg-white/10" />
            <div className="h-9 rounded-xl bg-gray-100 dark:bg-white/[0.06]" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between gap-3">
        <p className="text-[13px] text-gray-500 dark:text-gray-400">{spaces.length} espace{spaces.length !== 1 ? "s" : ""}</p>
        <Button variant="accent" size="sm" onClick={() => setShowCreate(true)}>
          <Plus className="w-4 h-4" /> Nouvel espace
        </Button>
      </div>

      {spaces.length === 0 && (
        <EmptyState icon={Users} title="Aucun espace partagé" description="Un espace partagé est un cloud commun à plusieurs utilisateurs, avec son propre quota." action={<Button variant="accent" onClick={() => setShowCreate(true)}><Plus className="w-4 h-4" /> Créer un espace</Button>} />
      )}

      <div className="grid gap-4 lg:grid-cols-2">
        {spaces.map((space) => {
          const percent = space.quotaBytes > 0 ? Math.min(Math.round((space.usedBytes / space.quotaBytes) * 100), 100) : 0;
          const memberUserIds = space.members.map((m) => m.user.id);
          const nonMembers = users.filter((u) => !memberUserIds.includes(u.id));

          return (
            <motion.div
              key={space.id}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="card p-5"
            >
              {/* Header */}
              <div className="flex items-start justify-between gap-3 mb-4">
                <div className="flex items-center gap-2 min-w-0">
                  <div className="w-10 h-10 rounded-2xl bg-violet-500/10 flex items-center justify-center flex-shrink-0">
                    <Users className="w-5 h-5 text-violet-600 dark:text-violet-300" />
                  </div>
                  <div className="min-w-0">
                    <p className="text-[15px] font-semibold text-gray-900 dark:text-white truncate">{space.name}</p>
                    <p className="text-[12.5px] text-gray-500 dark:text-gray-400">{space._count.members} membre{space._count.members !== 1 ? "s" : ""} · {space._count.folders} dossier{space._count.folders !== 1 ? "s" : ""}</p>
                  </div>
                </div>
                <div className="flex items-center gap-1 flex-shrink-0">
                  <button onClick={() => setEditSpace(space)} className="w-9 h-9 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/[0.08] transition-colors" title="Renommer">
                    <Edit2 className="w-4 h-4" />
                  </button>
                  <button onClick={() => setToDelete(space)} className="w-9 h-9 flex items-center justify-center rounded-lg text-gray-400 hover:text-rose-500 hover:bg-rose-500/10 transition-colors" title="Supprimer">
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {/* Storage quota */}
              <div className="mb-4">
                <div className="flex justify-between text-xs text-gray-500 mb-1">
                  <span>Stockage utilisé</span>
                  <span>{formatFileSize(space.usedBytes)} / {formatFileSize(space.quotaBytes)}</span>
                </div>
                <div className="w-full bg-gray-200 dark:bg-white/10 rounded-full h-1.5 overflow-hidden">
                  <div
                    className={`h-1.5 rounded-full transition-all ${percent > 90 ? "bg-rose-500" : percent > 70 ? "bg-amber-500" : "bg-accent-gradient"}`}
                    style={{ width: `${Math.max(1, percent)}%` }}
                  />
                </div>
                <p className="text-xs text-gray-400 mt-1">{percent}% utilisé</p>
              </div>

              {/* Members */}
              <div>
                <p className="text-[11px] font-semibold text-gray-400 uppercase tracking-[0.12em] mb-2">Membres</p>
                <div className="space-y-0.5 mb-3">
                  {space.members.map((m) => (
                    <div key={m.id} className="flex items-center justify-between py-1 pl-2 pr-1 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5">
                      <div className="flex items-center gap-2.5 min-w-0">
                        <UserAvatar userId={m.user.id} name={m.user.name || m.user.username} size="sm" />
                        <span className="text-[13.5px] text-gray-700 dark:text-gray-200 truncate">{m.user.name || m.user.username}</span>
                      </div>
                      <button onClick={() => handleRemoveMember(space.id, m.user.id)} className="w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-rose-500 hover:bg-rose-500/10 transition-colors" title="Retirer">
                        <UserMinus className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  ))}
                  {space.members.length === 0 && (
                    <p className="text-xs text-gray-400 px-2">Aucun membre pour l&apos;instant</p>
                  )}
                </div>

                {/* Add member */}
                {nonMembers.length > 0 && (
                  <div className="flex gap-2">
                    <select
                      className="field h-10 flex-1"
                      defaultValue=""
                      onChange={(e) => {
                        if (e.target.value) { handleAddMember(space.id, e.target.value); e.target.value = ""; }
                      }}
                    >
                      <option value="" disabled>Ajouter un membre...</option>
                      {nonMembers.map((u) => (
                        <option key={u.id} value={u.id}>{u.name || u.username}</option>
                      ))}
                    </select>
                    <span className="w-10 h-10 flex items-center justify-center rounded-xl bg-blue-500/10 text-blue-600 dark:text-blue-300 shrink-0" aria-hidden>
                      <UserPlus className="w-5 h-5" />
                    </span>
                  </div>
                )}
              </div>
            </motion.div>
          );
        })}
      </div>

      {/* Create modal */}
      <Modal isOpen={showCreate} onClose={() => { setShowCreate(false); setForm({ name: "", memberIds: [] }); }} title="Nouvel espace partagé">
        <input
          type="text"
          placeholder="Nom de l'espace"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          className={inputClasses}
          autoFocus
        />
        {users.length > 0 && (
          <div className="mb-4">
            <p className="text-[11px] font-semibold text-gray-400 uppercase tracking-[0.12em] mb-2">Membres</p>
            <div className="space-y-0.5 max-h-48 overflow-auto scrollbar-thin">
              {users.map((u) => (
                <label key={u.id} className="flex items-center gap-3 px-2 h-10 rounded-xl hover:bg-gray-50 dark:hover:bg-white/5 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={form.memberIds.includes(u.id)}
                    onChange={() => toggleMember(u.id)}
                    className="w-4 h-4 rounded accent-[rgb(var(--accent-500))]"
                  />
                  <span className="text-[13.5px] text-gray-700 dark:text-gray-200">{u.name || u.username}</span>
                </label>
              ))}
            </div>
          </div>
        )}
        <p className="text-xs text-gray-400 mb-4">Quota : 500 Go par défaut</p>
        <div className="flex gap-2 justify-end">
          <Button variant="ghost" onClick={() => { setShowCreate(false); setForm({ name: "", memberIds: [] }); }}>Annuler</Button>
          <Button variant="accent" onClick={handleCreate} disabled={!form.name.trim()}>Créer</Button>
        </div>
      </Modal>

      <Modal
        isOpen={!!toDelete}
        onClose={() => setToDelete(null)}
        title="Supprimer cet espace partagé ?"
        description={toDelete?.name}
        footer={<><Button variant="ghost" onClick={() => setToDelete(null)}>Annuler</Button><Button variant="danger" onClick={handleDelete}><Trash2 className="w-4 h-4" /> Supprimer</Button></>}
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">Les dossiers seront conservés mais retirés de l&apos;espace ; les membres perdront l&apos;accès partagé.</p>
      </Modal>

      {/* Edit modal */}
      <Modal isOpen={!!editSpace} onClose={() => setEditSpace(null)} title="Modifier l'espace">
        {editSpace && (
          <>
            <input
              type="text"
              value={editSpace.name}
              onChange={(e) => setEditSpace({ ...editSpace, name: e.target.value })}
              className={inputClasses}
              autoFocus
            />
            <div className="flex gap-2 justify-end">
              <Button variant="ghost" onClick={() => setEditSpace(null)}>Annuler</Button>
              <Button onClick={handleRename}>Enregistrer</Button>
            </div>
          </>
        )}
      </Modal>
    </div>
  );
}