"use client";

import { useState } from "react";
import { MoreHorizontal, UserPlus, X } from "lucide-react";

type Member = {
  id: string;
  name: string;
  email: string;
  role: "Owner" | "Admin" | "Editor" | "Viewer";
  lastSeen: string;
  initials: string;
  color: string;
};

const MEMBERS: Member[] = [
  { id: "m1", name: "Adam Rotard", email: "adamrotard@gmail.com", role: "Owner", lastSeen: "Maintenant", initials: "AR", color: "from-purple-500 to-accent" },
  { id: "m2", name: "Marc Dupont", email: "marc@atelier-verdun.fr", role: "Admin", lastSeen: "il y a 1 h", initials: "MD", color: "from-emerald-500 to-teal-600" },
  { id: "m3", name: "Léa Martin", email: "lea@atelier-verdun.fr", role: "Editor", lastSeen: "il y a 2 j", initials: "LM", color: "from-sky-500 to-cyan-600" },
  { id: "m4", name: "Thomas Rey", email: "thomas@example.com", role: "Viewer", lastSeen: "il y a 5 j", initials: "TR", color: "from-amber-500 to-orange-600" },
  { id: "m5", name: "Sophie Blanc", email: "sophie@example.com", role: "Viewer", lastSeen: "il y a 12 j", initials: "SB", color: "from-pink-500 to-rose-600" },
];

const ROLE_COLORS: Record<Member["role"], string> = {
  Owner: "text-accent-light bg-accent/10 border-accent/25",
  Admin: "text-emerald-400 bg-emerald-500/10 border-emerald-500/25",
  Editor: "text-sky-400 bg-sky-500/10 border-sky-500/25",
  Viewer: "text-text-dim bg-bg border-border",
};

export function TabEquipe() {
  const [showInvite, setShowInvite] = useState(false);

  return (
    <div className="space-y-5 max-w-3xl">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="text-[12.5px] text-text-dim">
          <span className="text-text font-semibold">3</span> / 5 membres{" "}
          <span className="text-text-dimmer">(plan Pro)</span>
        </div>
        <button
          onClick={() => setShowInvite(true)}
          className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-[12.5px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity"
        >
          <UserPlus className="w-3.5 h-3.5" />
          Inviter un membre
        </button>
      </div>

      {/* Tableau */}
      <div className="bg-bg-card border border-border rounded-xl overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="border-b border-border">
              <th className="text-left px-4 py-3 text-[11px] font-semibold text-text-dim uppercase tracking-wider">
                Membre
              </th>
              <th className="hidden sm:table-cell text-left px-4 py-3 text-[11px] font-semibold text-text-dim uppercase tracking-wider">
                Rôle
              </th>
              <th className="hidden md:table-cell text-left px-4 py-3 text-[11px] font-semibold text-text-dim uppercase tracking-wider">
                Dernière connexion
              </th>
              <th className="px-4 py-3 w-10" />
            </tr>
          </thead>
          <tbody className="divide-y divide-border">
            {MEMBERS.map((m) => (
              <tr key={m.id} className="hover:bg-bg-card-hover/50 transition-colors">
                <td className="px-4 py-3">
                  <div className="flex items-center gap-3">
                    <div
                      className={`w-8 h-8 rounded-full bg-gradient-to-br ${m.color} flex items-center justify-center text-[11px] font-bold text-white shrink-0`}
                    >
                      {m.initials}
                    </div>
                    <div className="min-w-0">
                      <div className="text-[13px] font-medium text-text truncate">{m.name}</div>
                      <div className="text-[11.5px] text-text-dim truncate">{m.email}</div>
                    </div>
                  </div>
                </td>
                <td className="hidden sm:table-cell px-4 py-3">
                  <span
                    className={`inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border ${ROLE_COLORS[m.role]}`}
                  >
                    {m.role}
                  </span>
                </td>
                <td className="hidden md:table-cell px-4 py-3 text-[12.5px] text-text-dim">
                  {m.lastSeen}
                </td>
                <td className="px-4 py-3">
                  <button className="p-1.5 rounded hover:bg-bg-card-hover text-text-dimmer hover:text-text-dim transition-colors">
                    <MoreHorizontal className="w-4 h-4" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Modal invite */}
      {showInvite && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-bg/80 backdrop-blur-sm">
          <div className="bg-bg-card border border-border rounded-xl p-6 w-full max-w-md shadow-2xl">
            <div className="flex items-center justify-between mb-5">
              <div className="text-[15px] font-semibold text-text">Inviter un membre</div>
              <button
                onClick={() => setShowInvite(false)}
                className="p-1.5 rounded hover:bg-bg-card-hover text-text-dimmer transition-colors"
              >
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-[12px] font-medium text-text-dim mb-1.5">Email</label>
                <input
                  type="email"
                  placeholder="nom@exemple.com"
                  className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright placeholder:text-text-dimmer"
                />
              </div>
              <div>
                <label className="block text-[12px] font-medium text-text-dim mb-1.5">Rôle</label>
                <select className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright">
                  <option>Editor</option>
                  <option>Viewer</option>
                  <option>Admin</option>
                </select>
              </div>
              <div className="flex gap-2 pt-1">
                <button
                  onClick={() => setShowInvite(false)}
                  className="flex-1 px-4 py-2 rounded-lg text-[13px] border border-border hover:bg-bg-card-hover text-text-dim transition-colors"
                >
                  Annuler
                </button>
                <button
                  onClick={() => setShowInvite(false)}
                  className="flex-1 px-4 py-2 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity"
                >
                  Envoyer l'invitation
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}