"use client";

import { use, useState, useEffect, useCallback } from "react";
import Link from "next/link";
import { ArrowLeft, Users, Plus, Trash2, BookOpen, Loader2 } from "lucide-react";
import { listTeamMembers, listTeamRepos, addTeamMember, removeTeamMember, addTeamRepo, removeTeamRepo } from "@/lib/api";
import { useVaults } from "@/lib/use-data";
import { useToast } from "@/components/toast";

export default function TeamDetailPage({
  params,
}: {
  params: Promise<{ org: string; slug: string }>;
}) {
  const { org, slug } = use(params);
  const { showToast } = useToast();
  const { vaults } = useVaults();

  const [members, setMembers] = useState<any[]>([]);
  const [repos, setRepos] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [refreshKey, setRefreshKey] = useState(0);

  // Add member form
  const [showAddMember, setShowAddMember] = useState(false);
  const [newMemberUsername, setNewMemberUsername] = useState("");
  const [addingMember, setAddingMember] = useState(false);

  // Share vault form
  const [showShareVault, setShowShareVault] = useState(false);
  const [selectedVault, setSelectedVault] = useState("");
  const [selectedPermission, setSelectedPermission] = useState("push");
  const [sharingVault, setSharingVault] = useState(false);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const [membersData, reposData] = await Promise.all([
        listTeamMembers(org, slug),
        listTeamRepos(org, slug),
      ]);
      setMembers(Array.isArray(membersData) ? membersData : []);
      setRepos(Array.isArray(reposData) ? reposData : []);
    } catch {
      // ignore
    } finally {
      setLoading(false);
    }
  }, [org, slug]);

  useEffect(() => {
    loadData();
  }, [loadData, refreshKey]);

  const handleAddMember = async () => {
    if (!newMemberUsername.trim()) return;
    setAddingMember(true);
    try {
      const result = await addTeamMember(org, slug, newMemberUsername.trim());
      if (result) {
        showToast(`Added ${newMemberUsername.trim()} to team`);
        setNewMemberUsername("");
        setShowAddMember(false);
        setRefreshKey((k) => k + 1);
      } else {
        showToast("Failed to add member", "error");
      }
    } catch {
      showToast("Failed to add member", "error");
    } finally {
      setAddingMember(false);
    }
  };

  const handleRemoveMember = async (username: string) => {
    const result = await removeTeamMember(org, slug, username);
    if (result !== null) {
      showToast(`Removed ${username} from team`);
      setRefreshKey((k) => k + 1);
    } else {
      showToast("Failed to remove member", "error");
    }
  };

  const handleShareVault = async () => {
    if (!selectedVault) return;
    setSharingVault(true);
    try {
      const [vaultOwner, vaultRepo] = selectedVault.split("/");
      const result = await addTeamRepo(org, slug, vaultOwner, vaultRepo, selectedPermission);
      if (result) {
        showToast(`Shared ${selectedVault} with team`);
        setSelectedVault("");
        setShowShareVault(false);
        setRefreshKey((k) => k + 1);
      } else {
        showToast("Failed to share vault", "error");
      }
    } catch {
      showToast("Failed to share vault", "error");
    } finally {
      setSharingVault(false);
    }
  };

  const handleRemoveRepo = async (fullName: string) => {
    const [repoOwner, repoName] = fullName.split("/");
    const result = await removeTeamRepo(org, slug, repoOwner, repoName);
    if (result !== null) {
      showToast(`Removed ${fullName} from team`);
      setRefreshKey((k) => k + 1);
    } else {
      showToast("Failed to remove vault", "error");
    }
  };

  // Filter out vaults already shared with team
  const repoFullNames = new Set(repos.map((r: any) => r.full_name));
  const availableVaults = vaults.filter((v) => !repoFullNames.has(v.fullName));

  return (
    <div className="min-h-screen bg-background text-text-primary">
      <div className="max-w-3xl mx-auto px-6 py-8">
        {/* Header */}
        <div className="mb-8">
          <Link
            href="/"
            className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-text-primary transition-colors mb-4"
          >
            <ArrowLeft size={14} />
            Back
          </Link>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-accent/20 text-accent flex items-center justify-center">
              <Users size={20} />
            </div>
            <div>
              <h1 className="text-xl font-semibold">{slug}</h1>
              <p className="text-sm text-text-muted">{org}</p>
            </div>
          </div>
        </div>

        {loading ? (
          <div className="flex items-center justify-center py-16">
            <Loader2 size={24} className="animate-spin text-text-muted" />
          </div>
        ) : (
          <div className="space-y-8">
            {/* Members Section */}
            <section>
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-sm font-medium text-text-muted uppercase tracking-wider">
                  Members ({members.length})
                </h2>
                <button
                  onClick={() => setShowAddMember(!showAddMember)}
                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-accent text-white hover:bg-accent-hover transition-colors"
                >
                  <Plus size={12} />
                  Add Member
                </button>
              </div>

              {showAddMember && (
                <div className="flex gap-2 mb-4">
                  <input
                    type="text"
                    value={newMemberUsername}
                    onChange={(e) => setNewMemberUsername(e.target.value)}
                    onKeyDown={(e) => e.key === "Enter" && handleAddMember()}
                    placeholder="Username"
                    className="flex-1 px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent"
                  />
                  <button
                    onClick={handleAddMember}
                    disabled={addingMember || !newMemberUsername.trim()}
                    className="px-4 py-2 text-sm font-medium rounded-md bg-accent text-white hover:bg-accent-hover disabled:opacity-50 transition-colors"
                  >
                    {addingMember ? <Loader2 size={14} className="animate-spin" /> : "Add"}
                  </button>
                </div>
              )}

              {members.length === 0 ? (
                <p className="text-sm text-text-muted py-4">No members yet. Add someone to get started.</p>
              ) : (
                <div className="space-y-1">
                  {members.map((member: any) => (
                    <div
                      key={member.id || member.login}
                      className="flex items-center justify-between px-4 py-3 rounded-lg bg-surface border border-border-light"
                    >
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 rounded-full bg-accent/20 text-accent flex items-center justify-center text-xs font-bold">
                          {(member.login || "?").charAt(0).toUpperCase()}
                        </div>
                        <div>
                          <p className="text-sm font-medium text-text-primary">{member.login}</p>
                          {member.role && (
                            <p className="text-xs text-text-muted">{member.role}</p>
                          )}
                        </div>
                      </div>
                      <button
                        onClick={() => handleRemoveMember(member.login)}
                        className="p-1.5 rounded-md text-text-muted hover:text-error hover:bg-error/10 transition-colors"
                        title="Remove member"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </section>

            {/* Shared Repos Section */}
            <section>
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-sm font-medium text-text-muted uppercase tracking-wider">
                  Shared Vaults ({repos.length})
                </h2>
                <button
                  onClick={() => setShowShareVault(!showShareVault)}
                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md bg-accent text-white hover:bg-accent-hover transition-colors"
                >
                  <Plus size={12} />
                  Share Vault
                </button>
              </div>

              {showShareVault && (
                <div className="flex gap-2 mb-4">
                  <select
                    value={selectedVault}
                    onChange={(e) => setSelectedVault(e.target.value)}
                    className="flex-1 px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary focus:outline-none focus:border-accent"
                  >
                    <option value="">Select a vault...</option>
                    {availableVaults.map((v) => (
                      <option key={v.fullName} value={v.fullName}>
                        {v.fullName}
                      </option>
                    ))}
                  </select>
                  <select
                    value={selectedPermission}
                    onChange={(e) => setSelectedPermission(e.target.value)}
                    className="px-3 py-2 bg-surface border border-border rounded-md text-sm text-text-primary focus:outline-none focus:border-accent"
                  >
                    <option value="pull">Read</option>
                    <option value="push">Write</option>
                    <option value="admin">Admin</option>
                  </select>
                  <button
                    onClick={handleShareVault}
                    disabled={sharingVault || !selectedVault}
                    className="px-4 py-2 text-sm font-medium rounded-md bg-accent text-white hover:bg-accent-hover disabled:opacity-50 transition-colors"
                  >
                    {sharingVault ? <Loader2 size={14} className="animate-spin" /> : "Share"}
                  </button>
                </div>
              )}

              {repos.length === 0 ? (
                <p className="text-sm text-text-muted py-4">No vaults shared with this team yet.</p>
              ) : (
                <div className="space-y-1">
                  {repos.map((repo: any) => (
                    <div
                      key={repo.id || repo.full_name}
                      className="flex items-center justify-between px-4 py-3 rounded-lg bg-surface border border-border-light"
                    >
                      <div className="flex items-center gap-3">
                        <BookOpen size={16} className="text-accent shrink-0" />
                        <div>
                          <p className="text-sm font-medium text-text-primary">{repo.full_name || repo.name}</p>
                          {repo.description && (
                            <p className="text-xs text-text-muted truncate max-w-md">{repo.description}</p>
                          )}
                        </div>
                      </div>
                      <button
                        onClick={() => handleRemoveRepo(repo.full_name)}
                        className="p-1.5 rounded-md text-text-muted hover:text-error hover:bg-error/10 transition-colors"
                        title="Remove vault"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </section>
          </div>
        )}
      </div>
    </div>
  );
}