"use client";

import { cn } from "@/lib/utils";
import type { LayeredTier } from "@/lib/api/types";
import { SourceTierBadge, ConflictGauge, tierLabels, type SourceTier } from "@/components/skeptic";

function getConflictStatus(score: number): "Unanimous" | "Agreed" | "Contested" {
  if (score < 0.1) return "Unanimous";
  if (score < 0.4) return "Agreed";
  return "Contested";
}

interface TierAccordionProps {
  tier: LayeredTier;
  isExpanded: boolean;
  onToggle: () => void;
}

export function TierAccordion({ tier, isExpanded, onToggle }: TierAccordionProps) {
  const safeTier = (tier.tier >= 0 && tier.tier <= 5 ? tier.tier : 5) as SourceTier;
  const tierLabel = tierLabels[safeTier] || tier.source_class;
  const conflictStatus = getConflictStatus(tier.conflict_score);

  return (
    <div className="border border-border rounded-lg overflow-hidden">
      <button
        type="button"
        onClick={onToggle}
        className={cn(
          "w-full px-4 py-3 flex items-center justify-between gap-4",
          "bg-card hover:bg-muted/50 transition-colors",
          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset"
        )}
        aria-expanded={isExpanded}
      >
        <div className="flex items-center gap-3">
          <SourceTierBadge tier={tier.tier} size="sm" />
          <span className="font-medium text-foreground">{tierLabel}</span>
          <span className="text-sm text-muted-foreground">
            {tier.candidates_count} candidate{tier.candidates_count !== 1 ? "s" : ""}
          </span>
        </div>

        <div className="flex items-center gap-4">
          <ConflictGauge
            score={tier.conflict_score}
            status={conflictStatus}
            variant="intra-tier"
            compact
          />
          <svg
            className={cn(
              "w-5 h-5 text-muted-foreground transition-transform",
              isExpanded && "rotate-90"
            )}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M9 5l7 7-7 7"
            />
          </svg>
        </div>
      </button>

      {isExpanded && tier.winner && (
        <div className="px-4 py-4 border-t border-border bg-card/50 space-y-3">
          {/* Winner value */}
          <div>
            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
              Tier Winner
            </span>
            <p className="mt-1 text-foreground">
              {String(tier.winner.object.value)}
            </p>
          </div>

          {/* Metadata grid */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
            <div>
              <span className="text-muted-foreground">Confidence</span>
              <p className="font-medium text-foreground">
                {(tier.winner.confidence * 100).toFixed(0)}%
              </p>
            </div>
            <div>
              <span className="text-muted-foreground">Lifecycle</span>
              <p className="font-medium text-foreground">{tier.winner.lifecycle}</p>
            </div>
            <div>
              <span className="text-muted-foreground">Resolution</span>
              <p className="font-medium text-foreground">
                {(tier.resolution_confidence * 100).toFixed(0)}%
              </p>
            </div>
            <div>
              <span className="text-muted-foreground">Source</span>
              <p className="font-mono text-xs text-foreground truncate" title={tier.winner.source_hash}>
                {tier.winner.source_hash.slice(0, 12)}...
              </p>
            </div>
          </div>

          {/* Assertion hash */}
          <div className="pt-2 border-t border-border">
            <span className="text-xs text-muted-foreground">Assertion: </span>
            <code className="text-xs font-mono text-muted-foreground">
              {tier.winner.hash}
            </code>
          </div>
        </div>
      )}
    </div>
  );
}
