PocketVeto/frontend/components/bills/AIBriefCard.tsx

"use client";

import { useState } from "react";
import { AlertTriangle, CheckCircle, Clock, Cpu, ExternalLink, Tag } from "lucide-react";
import { BriefSchema, CitedPoint } from "@/lib/types";
import { formatDate } from "@/lib/utils";

interface AIBriefCardProps {
  brief?: BriefSchema | null;
}

function isCited(p: string | CitedPoint): p is CitedPoint {
  return typeof p === "object" && p !== null && "text" in p;
}

interface CitedItemProps {
  point: string | CitedPoint;
  icon: React.ReactNode;
  govinfo_url?: string;
  openKey: string;
  activeKey: string | null;
  setActiveKey: (key: string | null) => void;
}

function CitedItem({ point, icon, govinfo_url, openKey, activeKey, setActiveKey }: CitedItemProps) {
  const cited = isCited(point);
  const isOpen = activeKey === openKey;

  return (
    <li className="text-sm">
      <div className="flex items-start gap-2">
        <span className="mt-0.5 shrink-0">{icon}</span>
        <span className="flex-1">{cited ? point.text : point}</span>
        {cited && (
          <button
            onClick={() => setActiveKey(isOpen ? null : openKey)}
            title={isOpen ? "Hide source" : "View source"}
            className={`shrink-0 text-xs px-1.5 py-0.5 rounded font-mono transition-colors ${
              isOpen
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
            }`}
          >
            § {point.citation}
          </button>
        )}
      </div>
      {cited && isOpen && (
        <div className="mt-2 ml-5 rounded-md border border-border bg-muted/40 p-3 space-y-2">
          <blockquote className="text-xs text-muted-foreground italic leading-relaxed border-l-2 border-primary pl-3">
            "{point.quote}"
          </blockquote>
          {govinfo_url && (
            <a
              href={govinfo_url}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
            >
              View source <ExternalLink className="w-3 h-3" />
            </a>
          )}
        </div>
      )}
    </li>
  );
}

export function AIBriefCard({ brief }: AIBriefCardProps) {
  const [activeKey, setActiveKey] = useState<string | null>(null);

  if (!brief) {
    return (
      <div className="bg-card border border-border rounded-lg p-6">
        <div className="flex items-center gap-2 mb-3">
          <Cpu className="w-4 h-4 text-muted-foreground" />
          <h2 className="font-semibold">AI Analysis</h2>
        </div>
        <p className="text-sm text-muted-foreground italic">
          Analysis not yet generated. It will appear once the bill text has been processed.
        </p>
      </div>
    );
  }

  return (
    <div className="bg-card border border-border rounded-lg p-6 space-y-5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Cpu className="w-4 h-4 text-primary" />
          <h2 className="font-semibold">AI Analysis</h2>
        </div>
        <span className="text-xs text-muted-foreground">
          {brief.llm_provider}/{brief.llm_model} · {formatDate(brief.created_at)}
        </span>
      </div>

      {brief.summary && (
        <div>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Summary</h3>
          <p className="text-sm leading-relaxed whitespace-pre-line">{brief.summary}</p>
        </div>
      )}

      {brief.key_points && brief.key_points.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Key Points</h3>
          <ul className="space-y-2">
            {brief.key_points.map((point, i) => (
              <CitedItem
                key={i}
                point={point}
                icon={<CheckCircle className="w-3.5 h-3.5 text-green-500" />}
                govinfo_url={brief.govinfo_url}
                openKey={`kp-${i}`}
                activeKey={activeKey}
                setActiveKey={setActiveKey}
              />
            ))}
          </ul>
        </div>
      )}

      {brief.risks && brief.risks.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Risks & Concerns</h3>
          <ul className="space-y-2">
            {brief.risks.map((risk, i) => (
              <CitedItem
                key={i}
                point={risk}
                icon={<AlertTriangle className="w-3.5 h-3.5 text-yellow-500" />}
                govinfo_url={brief.govinfo_url}
                openKey={`risk-${i}`}
                activeKey={activeKey}
                setActiveKey={setActiveKey}
              />
            ))}
          </ul>
        </div>
      )}

      {brief.deadlines && brief.deadlines.length > 0 && (
        <div>
          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-2">Deadlines</h3>
          <ul className="space-y-1.5">
            {brief.deadlines.map((d, i) => (
              <li key={i} className="flex items-start gap-2 text-sm">
                <Clock className="w-3.5 h-3.5 mt-0.5 text-blue-500 shrink-0" />
                <span>
                  {d.date ? <strong>{formatDate(d.date)}: </strong> : ""}
                  {d.description}
                </span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {brief.topic_tags && brief.topic_tags.length > 0 && (
        <div className="flex items-center gap-2 pt-1 border-t border-border flex-wrap">
          <Tag className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
          {brief.topic_tags.map((tag) => (
            <span
              key={tag}
              className="text-xs px-2 py-1 bg-accent text-accent-foreground rounded-full"
            >
              {tag}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}