"use client";

import { Layers, AlertCircle } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import { useMcpBlocks, type McpBlock } from "@/lib/api/settings";

const GEN_TYPE_LABEL: Record<string, string> = {
  "template-fill": "מילוי תבנית",
  "paraphrase": "פרפרזה",
  "reproduction": "שעתוק",
  "guided-synthesis": "סינתזה מודרכת",
  "rhetorical-construction": "בניה רטורית",
};

const GEN_TYPE_TONE: Record<string, string> = {
  "template-fill": "text-ink-muted border-rule",
  "paraphrase": "text-info border-info/40",
  "reproduction": "text-info border-info/40",
  "guided-synthesis": "text-warn border-warn/40",
  "rhetorical-construction": "text-gold-deep border-gold/40",
};

function BlockRow({ block }: { block: McpBlock }) {
  const isLLM = block.model !== "script";
  return (
    <div className="rounded-md border border-rule p-4 bg-rule-soft/20 hover:bg-rule-soft/40 transition-colors">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 w-10 h-10 rounded-md bg-navy/5 border border-navy/20 flex items-center justify-center">
          <span className="text-navy text-sm font-semibold tabular-nums">
            {block.index}
          </span>
        </div>
        <div className="flex-1 min-w-0 space-y-2">
          <div className="flex items-center gap-2 flex-wrap">
            <h3 className="text-navy font-medium">{block.title}</h3>
            <code dir="ltr" className="font-mono text-[0.72rem] text-ink-muted">
              {block.id}
            </code>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <Badge
              variant="outline"
              className={`text-[0.7rem] ${GEN_TYPE_TONE[block.gen_type] ?? ""}`}
            >
              {GEN_TYPE_LABEL[block.gen_type] ?? block.gen_type}
            </Badge>
            <Badge variant="outline" className="text-[0.7rem] font-mono" dir="ltr">
              {block.model}
            </Badge>
            {isLLM && block.temperature !== null && (
              <Badge variant="outline" className="text-[0.7rem]">
                temp&nbsp;<span className="tabular-nums">{block.temperature}</span>
              </Badge>
            )}
            {block.max_tokens !== null && (
              <Badge variant="outline" className="text-[0.7rem]">
                max&nbsp;<span className="tabular-nums">{block.max_tokens}</span>
              </Badge>
            )}
          </div>
          {(block.creac_role || block.jwm_purpose) && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 text-[0.78rem] text-ink-muted pt-1">
              {block.creac_role && (
                <div>
                  <span className="text-[0.7rem] uppercase tracking-wide me-1">
                    CREAC:
                  </span>
                  <span dir="ltr">{block.creac_role}</span>
                </div>
              )}
              {block.jwm_purpose && (
                <div>
                  <span className="text-[0.7rem] uppercase tracking-wide me-1">
                    JWM:
                  </span>
                  <span dir="ltr">{block.jwm_purpose}</span>
                </div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export function BlocksTab() {
  const { data, isPending, error } = useMcpBlocks();

  if (isPending) return <Skeleton className="h-96 w-full" />;
  if (error) {
    return (
      <Card className="bg-surface border-danger/40">
        <CardContent className="p-6 flex items-center gap-3 text-danger">
          <AlertCircle className="w-5 h-5" />
          <span>שגיאה בטעינת בלוקים: {error.message}</span>
        </CardContent>
      </Card>
    );
  }
  if (!data) return null;

  return (
    <div className="space-y-4">
      <Card className="bg-surface border-rule">
        <CardContent className="px-6 py-5">
          <div className="flex items-center gap-2 mb-4 text-ink-muted text-sm">
            <Layers className="w-4 h-4" />
            <span>
              ארכיטקטורת 12 הבלוקים של החלטת ועדת ערר. מקור הסכימה:{" "}
              <code dir="ltr" className="font-mono text-[0.78rem]">
                docs/block-schema.md
              </code>
              .
            </span>
          </div>
          <div className="space-y-3">
            {data.blocks.map((b) => (
              <BlockRow key={b.id} block={b} />
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}