import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useEnglishTaxonomy } from "@/hooks/queries/useAiCourse";

type DimKey = "grammar_by_cefr" | "vocabulary_bands" | "skill_areas" | "topic_categories";

const LABELS: Record<DimKey, string> = {
  grammar_by_cefr: "Grammar topics by CEFR",
  vocabulary_bands: "Vocabulary bands",
  skill_areas: "Skill areas",
  topic_categories: "Topic categories",
};

export default function AiEnglishTaxonomy() {
  const { data, isLoading } = useEnglishTaxonomy();

  const dims = (data ?? {}) as Record<string, unknown[] | Record<string, unknown[]>>;

  return (
    <div className="space-y-6 p-6 max-w-5xl mx-auto">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight">English taxonomy reference</h1>
        <p className="text-muted-foreground text-sm mt-1">Read-only curriculum dimensions</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Taxonomy dimensions</CardTitle>
          <CardDescription>Four reference views</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <p className="text-muted-foreground">Loading…</p>
          ) : (
            <Accordion type="multiple" className="w-full">
              {(Object.keys(LABELS) as DimKey[]).map((key) => (
                <AccordionItem key={key} value={key}>
                  <AccordionTrigger>{LABELS[key]}</AccordionTrigger>
                  <AccordionContent>
                    <TaxonomyBlock value={dims[key]} />
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function TaxonomyBlock({ value }: { value: unknown }) {
  if (value == null) {
    return <p className="text-sm text-muted-foreground">No data.</p>;
  }
  if (Array.isArray(value)) {
    return (
      <div className="rounded-md border overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Entry</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {value.map((row, i) => (
              <TableRow key={i}>
                <TableCell>{typeof row === "object" && row !== null ? JSON.stringify(row) : String(row)}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    );
  }
  if (typeof value === "object") {
    const entries = Object.entries(value as Record<string, unknown[]>);
    return (
      <div className="space-y-4">
        {entries.map(([k, rows]) => (
          <div key={k}>
            <h4 className="text-sm font-semibold mb-2">{k}</h4>
            <div className="rounded-md border overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Item</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {(Array.isArray(rows) ? rows : []).map((row, i) => (
                    <TableRow key={i}>
                      <TableCell className="text-sm">
                        {typeof row === "object" && row !== null ? JSON.stringify(row) : String(row)}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        ))}
      </div>
    );
  }
  return <p className="text-sm">{String(value)}</p>;
}
