import { useState } from "react";
import {
  ArrowRight,
  Check,
  UserPlus,
  X,
} from "@phosphor-icons/react";
import type { AgentRecord, ApprovalRecord } from "@shared/types";
import { getAgentInitials } from "../lib/formatters";
import { ActionButton, EmptyState, Panel, StatusPill } from "./ui";

interface HiringPipelineProps {
  agents: AgentRecord[];
  approvals: ApprovalRecord[];
  onRefresh: () => Promise<void>;
  onNavigateToAgent: (agentId: string) => void;
}

type HiringStage = "requisition" | "pending_approval" | "approved" | "onboarding" | "active" | "rejected";

interface HiringCandidate {
  agent: AgentRecord | null;
  approval: ApprovalRecord | null;
  stage: HiringStage;
}

function getHiringStage(agent: AgentRecord, approval: ApprovalRecord | null): HiringStage {
  if (agent.status === "pending_approval") {
    if (!approval) return "requisition";
    if (approval.state === "pending") return "pending_approval";
    if (approval.state === "rejected") return "rejected";
    if (approval.state === "revision_requested") return "requisition";
    return "approved";
  }
  if (agent.status === "idle" && approval?.state === "approved") {
    return "onboarding";
  }
  return "active";
}

function stageLabel(stage: HiringStage): string {
  switch (stage) {
    case "requisition": return "Requisition";
    case "pending_approval": return "Pending Approval";
    case "approved": return "Approved";
    case "onboarding": return "Onboarding";
    case "active": return "Active";
    case "rejected": return "Rejected";
  }
}

function stageColor(stage: HiringStage): string {
  switch (stage) {
    case "requisition": return "bg-[color:var(--warn-soft)] text-[color:var(--warn)]";
    case "pending_approval": return "bg-[color:var(--warn-soft)] text-[color:var(--warn)]";
    case "approved": return "bg-[color:var(--success-soft)] text-[color:var(--success)]";
    case "onboarding": return "bg-[color:var(--accent-soft)] text-[color:var(--accent)]";
    case "active": return "bg-[color:var(--success-soft)] text-[color:var(--success)]";
    case "rejected": return "bg-[color:var(--danger-soft)] text-[color:var(--danger)]";
  }
}

const STAGE_ORDER: HiringStage[] = ["requisition", "pending_approval", "approved", "onboarding", "active", "rejected"];

export function HiringPipeline({ agents, approvals, onRefresh, onNavigateToAgent }: HiringPipelineProps) {
  const [filterStage, setFilterStage] = useState<HiringStage | "all">("all");

  const hireApprovals = approvals.filter(a => a.type === "hire_agent");

  const candidates: HiringCandidate[] = agents.map(agent => {
    const approval = hireApprovals.find(a => {
      if (a.relatedAgentId === agent.id) return true;
      if (!a.payloadJson) return false;
      try { return JSON.parse(a.payloadJson).agentId === agent.id; } catch { return false; }
    }) ?? null;
    return {
      agent,
      approval,
      stage: getHiringStage(agent, approval),
    };
  });

  const pendingHireApprovals = hireApprovals.filter(a => {
    return a.state === "pending" && !candidates.some(c => c.approval?.id === a.id);
  });

  const allCandidates = [
    ...candidates,
    ...pendingHireApprovals.map(a => ({
      agent: null,
      approval: a,
      stage: "pending_approval" as HiringStage,
    })),
  ].sort((a, b) => STAGE_ORDER.indexOf(a.stage) - STAGE_ORDER.indexOf(b.stage));

  const filteredCandidates = filterStage === "all"
    ? allCandidates
    : allCandidates.filter(c => c.stage === filterStage);

  const stageCounts = STAGE_ORDER.reduce((acc, stage) => {
    acc[stage] = allCandidates.filter(c => c.stage === stage).length;
    return acc;
  }, {} as Record<HiringStage, number>);

  const pendingCount = stageCounts.requisition + stageCounts.pending_approval;
  const activeHires = allCandidates.filter(c => c.stage !== "active" && c.stage !== "rejected").length;

  return (
    <div className="space-y-4">
      <Panel title="Hiring Pipeline" eyebrow={`${activeHires} active hiring processes`}>
        <div className="flex items-center gap-1 px-4 py-3 overflow-x-auto">
          {STAGE_ORDER.filter(s => s !== "rejected").map((stage, idx) => (
            <div key={stage} className="flex items-center gap-1">
              <button
                onClick={() => setFilterStage(filterStage === stage ? "all" : stage)}
                className={`px-3 py-2 rounded-md text-xs font-medium transition-colors whitespace-nowrap ${
                  filterStage === stage ? "ring-1 ring-[color:var(--accent)]/40 bg-[color:var(--panel-soft)]" : "hover:bg-[color:var(--panel-soft)]"
                } ${stageColor(stage)}`}
              >
                {stageLabel(stage)}
                <span className="ml-1.5 inline-flex items-center justify-center h-5 w-5 rounded-full bg-[color:var(--line)] text-[10px]">
                  {stageCounts[stage]}
                </span>
              </button>
              {idx < STAGE_ORDER.length - 2 && (
                <ArrowRight size={12} className="text-[color:var(--muted)] flex-shrink-0" />
              )}
            </div>
          ))}
          {stageCounts.rejected > 0 && (
            <button
              onClick={() => setFilterStage(filterStage === "rejected" ? "all" : "rejected")}
              className={`ml-4 px-3 py-2 rounded-md text-xs font-medium transition-colors ${
                filterStage === "rejected" ? "ring-1 ring-[color:var(--danger)]/40 bg-[color:var(--panel-soft)]" : "hover:bg-[color:var(--panel-soft)]"
              } ${stageColor("rejected")}`}
            >
              Rejected
              <span className="ml-1.5 inline-flex items-center justify-center h-5 w-5 rounded-full bg-[color:var(--line)] text-[10px]">
                {stageCounts.rejected}
              </span>
            </button>
          )}
        </div>
      </Panel>

      {pendingCount > 0 && (
        <Panel title="Awaiting Board Decision" eyebrow={`${pendingCount} hire requests need your review`}>
          <div className="divide-y divide-[color:var(--line)]">
            {allCandidates
              .filter(c => c.stage === "requisition" || c.stage === "pending_approval")
              .map((candidate) => {
                const a = candidate.approval;
                const ag = candidate.agent;
                return (
                  <div key={a?.id ?? ag?.id} className="px-4 py-3 flex items-start gap-3">
                    <div className="flex-shrink-0 mt-0.5 h-8 w-8 rounded-full bg-[color:var(--warn-soft)] flex items-center justify-center">
                      <UserPlus size={16} className="text-[color:var(--warn)]" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="font-medium text-sm text-[color:var(--text)]">{ag?.name ?? "Proposed Agent"}</span>
                        <span className={`text-[10px] px-1.5 py-0.5 rounded ${stageColor(candidate.stage)}`}>
                          {stageLabel(candidate.stage)}
                        </span>
                      </div>
                      <div className="text-xs text-[color:var(--muted)] mt-0.5">
                        {ag ? `${ag.role} — ${ag.title}` : a?.payloadSummary}
                      </div>
                      {ag?.department && (
                        <div className="text-xs text-[color:var(--muted)] mt-0.5">
                          Dept: {ag.department} | Budget: ${ag.budgetMonthlyUsd}/mo | Connector: {ag.connectorId}
                        </div>
                      )}
                      {a?.payloadSummary && (
                        <div className="text-xs text-[color:var(--muted)] mt-1">{a.payloadSummary}</div>
                      )}
                      {a?.impactSummary && (
                        <div className="text-xs text-[color:var(--muted)]">{a.impactSummary}</div>
                      )}
                      {ag?.capabilities && (
                        <div className="text-xs text-[color:var(--muted)] mt-1 line-clamp-2">{ag.capabilities}</div>
                      )}
                    </div>
                    <div className="flex items-center gap-1.5 flex-shrink-0">
                      {a && a.state === "pending" && (
                        <>
                          <ActionButton
                            label="Approve"
                            icon={Check}
                            tone="accent"
                            onClick={async () => {
                              await window.agentCompany.decideApproval({
                                companyId: a.companyId,
                                approvalId: a.id,
                                state: "approved",
                                decisionNote: "Hire approved via hiring pipeline",
                              });
                              await onRefresh();
                            }}
                          />
                          <ActionButton
                            label="Reject"
                            icon={X}
                            tone="danger"
                            onClick={async () => {
                              await window.agentCompany.decideApproval({
                                companyId: a.companyId,
                                approvalId: a.id,
                                state: "rejected",
                                decisionNote: "Hire rejected via hiring pipeline",
                              });
                              await onRefresh();
                            }}
                          />
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
          </div>
        </Panel>
      )}

      <Panel
        title={filterStage === "all" ? "All Agents" : `${stageLabel(filterStage)} (${filteredCandidates.length})`}
        action={
          filterStage !== "all" ? (
            <ActionButton label="Show all" icon={X} onClick={() => setFilterStage("all")} />
          ) : undefined
        }
      >
        {filteredCandidates.length === 0 ? (
          <EmptyState
            title="No hiring activity"
            detail="When agents propose new hires via the API, they will appear here for your review."
          />
        ) : (
          <div className="divide-y divide-[color:var(--line)]">
            {filteredCandidates.map((candidate) => {
              const ag = candidate.agent;
              if (!ag) return null;
              const manager = agents.find(a => a.id === ag.reportsTo);
              const requestedBy = candidate.approval?.requestedByAgentId
                ? agents.find(a => a.id === candidate.approval!.requestedByAgentId)
                : null;
              return (
                <div
                  key={ag.id}
                  className="px-4 py-3 flex items-center gap-3 hover:bg-[color:var(--panel-soft)] cursor-pointer transition-colors"
                  onClick={() => onNavigateToAgent(ag.id)}
                >
                  <div className="flex-shrink-0 h-8 w-8 rounded-full bg-[color:var(--panel-soft)] flex items-center justify-center text-xs font-bold text-[color:var(--muted-strong)]">
                    {getAgentInitials(ag.name)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-sm text-[color:var(--text)] truncate">{ag.name}</span>
                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${stageColor(candidate.stage)}`}>
                        {stageLabel(candidate.stage)}
                      </span>
                      <StatusPill status={ag.status} />
                    </div>
                    <div className="text-xs text-[color:var(--muted)] mt-0.5">
                      {ag.role} — {ag.title}{ag.department ? ` | ${ag.department}` : ""}
                    </div>
                  </div>
                  <div className="flex-shrink-0 text-right">
                    <div className="text-xs text-[color:var(--muted)]">
                      {manager ? `Reports to ${manager.name}` : "Top level"}
                    </div>
                    {requestedBy && (
                      <div className="text-[10px] text-[color:var(--muted)]">Proposed by {requestedBy.name}</div>
                    )}
                    <div className="text-xs text-[color:var(--muted)]">${ag.budgetMonthlyUsd}/mo</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </Panel>

      <div className="grid grid-cols-4 gap-3">
        <div className="rounded-lg px-4 py-3 border border-[color:var(--line)] bg-[color:var(--panel)]">
          <div className="text-[10px] uppercase text-[color:var(--muted)] tracking-wider">Total Agents</div>
          <div className="text-2xl font-bold text-[color:var(--text)] mt-1">{agents.filter(a => a.status !== "terminated").length}</div>
        </div>
        <div className="rounded-lg px-4 py-3 border border-[color:var(--line)] bg-[color:var(--panel)]">
          <div className="text-[10px] uppercase text-[color:var(--muted)] tracking-wider">Pending Hires</div>
          <div className="text-2xl font-bold text-[color:var(--warn)] mt-1">{agents.filter(a => a.status === "pending_approval").length}</div>
        </div>
        <div className="rounded-lg px-4 py-3 border border-[color:var(--line)] bg-[color:var(--panel)]">
          <div className="text-[10px] uppercase text-[color:var(--muted)] tracking-wider">Departments</div>
          <div className="text-2xl font-bold text-[color:var(--text)] mt-1">
            {new Set(agents.filter(a => a.department && a.status !== "terminated").map(a => a.department)).size}
          </div>
        </div>
        <div className="rounded-lg px-4 py-3 border border-[color:var(--line)] bg-[color:var(--panel)]">
          <div className="text-[10px] uppercase text-[color:var(--muted)] tracking-wider">Monthly Payroll</div>
          <div className="text-2xl font-bold text-[color:var(--text)] mt-1">
            ${agents.filter(a => a.status !== "terminated" && a.status !== "pending_approval").reduce((s, a) => s + a.budgetMonthlyUsd, 0).toLocaleString()}
          </div>
        </div>
      </div>

      <Panel title="Department Headcount">
        <div className="grid grid-cols-3 gap-2 p-4">
          {(["executive", "engineering", "product", "design", "marketing", "sales", "hr", "finance", "legal", "customer_support", "operations", "research"] as const).map(dept => {
            const deptAgents = agents.filter(a => a.department === dept && a.status !== "terminated");
            const pending = deptAgents.filter(a => a.status === "pending_approval").length;
            const active = deptAgents.filter(a => a.status !== "pending_approval").length;
            if (active === 0 && pending === 0) return null;
            return (
              <div key={dept} className="bg-[color:var(--panel-soft)] rounded-md px-3 py-2">
                <div className="text-xs font-medium text-[color:var(--text)] capitalize">{dept.replace("_", " ")}</div>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-sm font-bold text-[color:var(--text)]">{active}</span>
                  <span className="text-[10px] text-[color:var(--muted)]">active</span>
                  {pending > 0 && (
                    <>
                      <span className="text-sm font-bold text-[color:var(--warn)]">+{pending}</span>
                      <span className="text-[10px] text-[color:var(--warn)]">pending</span>
                    </>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </Panel>
    </div>
  );
}