"use client";

import { useState } from "react";
import { Users, Plus, Mail, Loader2, Trash2 } from "lucide-react";

interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: "مالك" | "مدير" | "مسوق" | "مشاهد";
  status: "active" | "invited";
  joinedAt: string;
}

const mockTeam: TeamMember[] = [
  { id: "t1", name: "رائد الحربي", email: "raiedseo@gmail.com", role: "مالك", status: "active", joinedAt: "2026-05-15" },
  { id: "t2", name: "أحمد العتيبي", email: "ahmad@procode.ads", role: "مدير", status: "active", joinedAt: "2026-05-20" },
  { id: "t3", name: "سارة الغامدي", email: "sara@procode.ads", role: "مسوق", status: "active", joinedAt: "2026-05-25" },
  { id: "t4", name: "خالد الحربي", email: "khaled@example.com", role: "مشاهد", status: "invited", joinedAt: "2026-06-01" },
];

export default function TeamPage() {
  const [team, setTeam] = useState<TeamMember[]>(mockTeam);
  const [emailInput, setEmailInput] = useState("");
  const [roleInput, setRoleInput] = useState<any>("مسوق");
  const [sending, setSending] = useState(false);

  function handleInvite(e: React.FormEvent) {
    e.preventDefault();
    if (!emailInput.trim()) return;

    setSending(true);
    setTimeout(() => {
      const newMember: TeamMember = {
        id: `t-${Date.now()}`,
        name: emailInput.split("@")[0],
        email: emailInput,
        role: roleInput,
        status: "invited",
        joinedAt: new Date().toISOString().split("T")[0],
      };
      setTeam((prev) => [...prev, newMember]);
      setEmailInput("");
      setSending(false);
    }, 600);
  }

  function handleRemoveMember(id: string) {
    if (!confirm("هل أنت متأكد من إزالة هذا العضو من الفريق؟")) return;
    setTeam((prev) => prev.filter((item) => item.id !== id));
  }

  return (
    <div className="p-6 max-w-4xl mx-auto space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-white flex items-center gap-2">
          <Users className="w-6 h-6 text-emerald-400" />
          إدارة أعضاء الفريق
        </h1>
        <p className="text-[#8a8380] text-sm mt-0.5">
          دعوة وتعديل صلاحيات أعضاء فريق العمل والمسوقين للمنصة
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        {/* Team List */}
        <div className="lg:col-span-2 space-y-4">
          <div className="bg-[#101010] border border-gray-800 rounded-xl overflow-hidden">
            <div className="p-4 border-b border-gray-800">
              <h3 className="text-white font-semibold text-sm">أعضاء الفريق الحاليين</h3>
            </div>
            
            <div className="divide-y divide-gray-800 text-xs">
              {team.map((member) => (
                <div key={member.id} className="flex items-center justify-between p-4 hover:bg-[#161b27]/10 transition-colors">
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <span className="text-white font-semibold">{member.name}</span>
                      <span className={`px-2 py-0.2 rounded text-[9px] font-medium ${
                        member.role === "مالك" ? "bg-red-500/10 text-red-400 border border-red-500/20" :
                        member.role === "مدير" ? "bg-purple-500/10 text-purple-400 border border-purple-500/20" :
                        member.role === "مسوق" ? "bg-blue-500/10 text-blue-400 border border-blue-500/20" :
                        "bg-gray-800 text-gray-500 border border-gray-700/50"
                      }`}>
                        {member.role}
                      </span>
                      {member.status === "invited" && (
                        <span className="px-1.5 py-0.2 bg-yellow-500/10 text-yellow-400 text-[9px] rounded font-semibold">
                          معلّق
                        </span>
                      )}
                    </div>
                    <p className="text-gray-500 font-mono">{member.email}</p>
                  </div>

                  <div className="flex items-center gap-2">
                    <span className="text-[10px] text-gray-600">انضم: {member.joinedAt}</span>
                    {member.role !== "مالك" && (
                      <button
                        onClick={() => handleRemoveMember(member.id)}
                        className="p-1 rounded bg-red-500/5 hover:bg-red-500/15 text-red-400 transition-colors"
                      >
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Invite Form */}
        <div className="bg-[#101010] border border-gray-800 rounded-xl p-5 space-y-4 h-fit">
          <h3 className="text-white font-semibold text-sm flex items-center gap-2">
            <Mail className="w-4 h-4 text-emerald-400" />
            دعوة عضو جديد
          </h3>

          <form onSubmit={handleInvite} className="space-y-4">
            <div className="space-y-1.5">
              <label className="block text-xs text-[#b8b3b0]">البريد الإلكتروني للزميل</label>
              <input
                type="email"
                required
                value={emailInput}
                onChange={(e) => setEmailInput(e.target.value)}
                placeholder="example@procode.ads"
                className="w-full bg-[#161b27] border border-gray-700 focus:border-emerald-500 text-white rounded-xl py-2 px-3 text-xs outline-none transition-colors"
              />
            </div>

            <div className="space-y-1.5">
              <label className="block text-xs text-[#b8b3b0]">الصلاحيات / الدور</label>
              <select
                value={roleInput}
                onChange={(e) => setRoleInput(e.target.value)}
                className="w-full bg-[#161b27] border border-gray-700 text-white rounded-xl py-2.5 px-3 text-xs outline-none cursor-pointer"
              >
                <option value="مدير">مدير (Admin)</option>
                <option value="مسوق">مسوق (Marketer)</option>
                <option value="مشاهد">مشاهد (Viewer)</option>
              </select>
            </div>

            <button
              type="submit"
              disabled={sending}
              className="w-full flex items-center justify-center gap-1.5 bg-emerald-500 hover:bg-emerald-400 disabled:opacity-40 text-white font-semibold py-2 rounded-xl text-xs transition-colors cursor-pointer"
            >
              {sending ? (
                <>
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  إرسال الدعوة...
                </>
              ) : (
                <>
                  <Plus className="w-3.5 h-3.5" />
                  إرسال دعوة انضمام
                </>
              )}
            </button>
          </form>
        </div>

      </div>
    </div>
  );
}