"use client";

import Link from "next/link";
import { ArrowRight, Briefcase, Play, UserPlus, Users } from "lucide-react";
import { ROLE_GROUP_LABELS } from "@/lib/role-intelligence";
import { isDigitallyAutomatable } from "@/lib/role-automation/task-catalog";
import { resolveUserRole } from "@/lib/user-workplace-role";
import type { RoleIntelligence } from "@/lib/types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface RoleIntelligencePanelProps {
  roles: RoleIntelligence;
  variant?: "full" | "compact";
  userRoleTitle?: string;
  aiLeaderEnabled?: boolean;
}

function isCurrentRole(role: string, currentTeam: string[]) {
  const lower = role.toLowerCase();
  return currentTeam.some(
    (c) => lower.includes(c.toLowerCase()) || c.toLowerCase().includes(lower.split("/")[0]?.trim() ?? ""),
  );
}

export function RoleIntelligencePanel({ roles, variant = "full", userRoleTitle, aiLeaderEnabled }: RoleIntelligencePanelProps) {
  if (variant === "compact") {
    return (
      <Card className="border-violet-500/20 bg-violet-500/5">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2 text-base">
            <Users className="h-4 w-4 text-violet-400" />
            Team & role intelligence
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          {userRoleTitle ? (
            <div>
              <p className="text-xs uppercase text-slate-500">You are</p>
              <p className="font-medium text-slate-100">{userRoleTitle}</p>
            </div>
          ) : null}
          <div>
            <p className="text-xs uppercase text-slate-500">Priority hire</p>
            <p className="font-medium text-violet-200">{roles.priorityHire}</p>
          </div>
          {roles.missingRoles.length > 0 ? (
            <div>
              <p className="text-xs uppercase text-slate-500">Missing roles</p>
              <div className="mt-1 flex flex-wrap gap-1">
                {roles.missingRoles.slice(0, 3).map((r) => (
                  <Badge key={r} className="border-amber-500/30 bg-amber-500/10 text-amber-200">
                    {r}
                  </Badge>
                ))}
              </div>
            </div>
          ) : null}
          {roles.opportunityRoleLink ? (
            <p className="text-slate-400">{roles.opportunityRoleLink}</p>
          ) : null}
          {aiLeaderEnabled ? (
            <p className="text-xs text-amber-300">AI Leader is on — check Dashboard or Role Agents for boss-mode execution.</p>
          ) : null}
          <div className="flex flex-wrap gap-2">
            <Link href="/agents">
              <Button size="sm" className="gap-2">
                <Play className="h-3.5 w-3.5" />
                Run role agents
              </Button>
            </Link>
            <Link href="/profile#team-blueprint">
              <Button variant="outline" size="sm" className="gap-2">
                See full team blueprint
                <ArrowRight className="h-3.5 w-3.5" />
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <Card className="border-violet-500/20 bg-gradient-to-br from-violet-500/10 to-slate-950">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Briefcase className="h-5 w-5 text-violet-400" />
            Role intelligence — {roles.industry}
          </CardTitle>
          {userRoleTitle ? (
            <p className="text-sm text-slate-400">Your role: {userRoleTitle}{aiLeaderEnabled ? " · AI Leader enabled" : ""}</p>
          ) : null}
        </CardHeader>
        <CardContent className="grid gap-4 md:grid-cols-3 text-sm">
          <div className="rounded-xl border border-slate-800 p-4">
            <p className="text-xs uppercase text-slate-500">First hire</p>
            <p className="mt-1 font-medium">{roles.firstHire}</p>
          </div>
          <div className="rounded-xl border border-slate-800 p-4">
            <p className="text-xs uppercase text-slate-500">Next hire</p>
            <p className="mt-1 font-medium">{roles.nextHire}</p>
          </div>
          <div className="rounded-xl border border-violet-500/30 bg-violet-500/10 p-4">
            <p className="flex items-center gap-1 text-xs uppercase text-violet-300">
              <UserPlus className="h-3.5 w-3.5" /> BrandLxft priority hire
            </p>
            <p className="mt-1 font-semibold text-violet-100">{roles.priorityHire}</p>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Current team</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            {roles.currentTeam.map((r) => (
              <Badge key={r} className="border-emerald-500/30 bg-emerald-500/10 text-emerald-200">
                {r}
              </Badge>
            ))}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Missing roles (growth blockers)</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            {roles.missingRoles.map((r) => (
              <Badge key={r} className="border-amber-500/30 bg-amber-500/10 text-amber-200">
                {r}
              </Badge>
            ))}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">Role blueprint by function</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
          {(Object.keys(roles.roleGroups) as Array<keyof typeof roles.roleGroups>)
            .filter((key) => roles.roleGroups[key].length > 0)
            .map((key) => (
            <div key={key} className="rounded-xl border border-slate-800 p-3">
              <p className="mb-2 text-xs font-medium uppercase tracking-wide text-slate-500">
                {ROLE_GROUP_LABELS[key]}
              </p>
              <div className="flex flex-wrap gap-1">
                {roles.roleGroups[key].map((role) => {
                  const filled = isCurrentRole(role, roles.currentTeam);
                  const missing = roles.missingRoles.includes(role);
                  const digital = isDigitallyAutomatable(role);
                  const badgeClass = filled
                    ? digital
                      ? "cursor-pointer border-emerald-500/30 bg-emerald-500/10 text-emerald-200 hover:bg-emerald-500/20"
                      : "border-emerald-500/20 bg-emerald-500/5 text-emerald-300/70"
                    : missing
                      ? digital
                        ? "cursor-pointer border-amber-500/30 bg-amber-500/10 text-amber-200 hover:bg-amber-500/20"
                        : "border-amber-500/20 bg-amber-500/5 text-amber-300/70"
                      : digital
                        ? "cursor-pointer border-slate-700 bg-slate-800/50 text-slate-300 hover:bg-slate-800"
                        : "border-slate-800/80 bg-slate-900/40 text-slate-500";

                  const badge = (
                    <Badge className={badgeClass}>
                      {role}{digital ? "" : " · manual"}
                    </Badge>
                  );

                  if (!digital) {
                    return (
                      <span key={role} className="inline-block" title="Manual/field role — not automatable">
                        {badge}
                      </span>
                    );
                  }

                  return (
                    <Link
                      key={role}
                      href={`/agents?role=${encodeURIComponent(role)}`}
                      className="inline-block"
                      title="Digital role — run in Role Agents"
                    >
                      {badge}
                    </Link>
                  );
                })}
              </div>
            </div>
          ))}
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Revenue drivers</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-slate-300">
            {roles.revenueDrivers.map((r) => (
              <p key={r}>• {r}</p>
            ))}
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Growth bottlenecks</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-slate-300">
            {roles.growthBottlenecks.map((r) => (
              <p key={r}>• {r}</p>
            ))}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">How BrandLxft uses roles</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm text-slate-300">
          {roles.howBrandLxftUsesRoles.map((line) => (
            <p key={line}>• {line}</p>
          ))}
          {roles.opportunityRoleLink ? (
            <div className="rounded-xl border border-sky-500/20 bg-sky-500/5 p-3 text-sky-200">
              <p className="text-xs uppercase text-sky-400">Connected to today&apos;s opportunity</p>
              <p className="mt-1">{roles.opportunityRoleLink}</p>
            </div>
          ) : null}
          <Link href="/agents">
            <Button className="gap-2">
              <Play className="h-4 w-4" />
              Open Role Agents
            </Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  );
}