"use client";

import Link from "next/link";
import { Crown, Settings } from "lucide-react";
import { useMemo } from "react";
import { personalizeTasksForRole } from "@/lib/role-automation/task-preview";
import { AI_LEADER_ROLE_NAME, getAiLeaderBrief, resolveUserRole } from "@/lib/user-workplace-role";
import { RoleTaskList } from "@/components/roles/task-box";
import type { Business, RoleAutomationRun } 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 AiLeaderCardProps {
  business: Business;
  onUpdate?: (business: Business) => void;
  variant?: "compact" | "full";
  onRunComplete?: (run: RoleAutomationRun) => void;
}

export function AiLeaderCard({ business, onUpdate, variant = "compact", onRunComplete }: AiLeaderCardProps) {
  const userRole = resolveUserRole(business);
  const leaderTasks = useMemo(
    () => (userRole.aiLeaderEnabled ? personalizeTasksForRole(business, AI_LEADER_ROLE_NAME) : []),
    [business, userRole.aiLeaderEnabled],
  );

  return (
    <Card className={userRole.aiLeaderEnabled ? "border-amber-500/30 bg-gradient-to-br from-amber-500/10 to-slate-950" : "border-slate-800"}>
      <CardHeader className={variant === "compact" ? "pb-3" : undefined}>
        <CardTitle className={`flex flex-wrap items-center gap-2 ${variant === "compact" ? "text-base" : ""}`}>
          <Crown className="h-4 w-4 text-amber-400" />
          Your role · {userRole.title}
          {userRole.aiLeaderEnabled ? (
            <Badge className="border-amber-500/30 bg-amber-500/10 text-amber-200">AI Leader on</Badge>
          ) : (
            <Badge className="border-slate-700 bg-slate-800/50 text-slate-400">AI Leader off</Badge>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3 text-sm">
        <p className="text-slate-300">{getAiLeaderBrief(business)}</p>

        {userRole.aiLeaderEnabled && variant === "full" ? (
          <RoleTaskList
            roleName={AI_LEADER_ROLE_NAME}
            roleGroup="leadership"
            tasks={leaderTasks}
            business={business}
            pastRuns={business.roleAutomationRuns ?? []}
            onRunComplete={onRunComplete}
            onBusinessUpdate={onUpdate}
          />
        ) : userRole.aiLeaderEnabled ? (
          <Link href="/agents?role=BrandLxft%20AI%20Leader">
            <Button variant="outline" size="sm">
              View leadership tasks in Role Agents
            </Button>
          </Link>
        ) : (
          <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-3 text-slate-400">
            Need a boss to get momentum? Turn on <strong className="text-slate-200">AI Leader</strong> in Settings — BrandLxft will drive priorities with personalized tasks you can run one at a time.
          </div>
        )}

        <Link href="/settings#your-role">
          <Button variant="ghost" size="sm" className="gap-1.5 text-slate-400">
            <Settings className="h-3.5 w-3.5" />
            Edit your role & AI Leader
          </Button>
        </Link>
      </CardContent>
    </Card>
  );
}