import { Download, FileText } from "lucide-react";
import { AppraisalDecision } from "../api/types";
import { Button } from "./ui/button";
import { api } from "../api/client";
import { formatDate } from "../lib/utils";

interface Props {
  decisions: AppraisalDecision[];
  totalInDb: number;
}

export function AppraisalsTable({ decisions, totalInDb }: Props) {
  if (!decisions.length) {
    return (
      <div className="text-center py-12 text-muted-foreground">
        לא נמצאו החלטות שמאי מכריע באזור הזה
      </div>
    );
  }

  return (
    <div className="space-y-3">
      <div className="text-sm text-muted-foreground">
        נמצאו {decisions.length} מתוך {totalInDb.toLocaleString("he-IL")} החלטות במאגר
      </div>
      <div className="overflow-x-auto rounded-md border">
        <table className="w-full text-sm">
          <thead className="bg-muted text-muted-foreground">
            <tr>
              <th className="p-3 text-start font-medium">תאריך הכרעה</th>
              <th className="p-3 text-start font-medium">שמאי מכריע</th>
              <th className="p-3 text-start font-medium">ועדה</th>
              <th className="p-3 text-start font-medium">גוש/חלקה</th>
              <th className="p-3 text-start font-medium">סוג שומה</th>
              <th className="p-3 text-start font-medium">כותרת ההחלטה</th>
              <th className="p-3 text-end font-medium">PDF</th>
            </tr>
          </thead>
          <tbody>
            {decisions.map((d) => (
              <tr key={d.id} className="border-t hover:bg-accent/40 align-top">
                <td className="p-3 whitespace-nowrap">{formatDate(d.decision_date)}</td>
                <td className="p-3 whitespace-nowrap">{d.decisive_appraiser || "—"}</td>
                <td className="p-3 whitespace-nowrap">{d.committee || "—"}</td>
                <td className="p-3 whitespace-nowrap tabular-nums">
                  {d.block ?? "—"}
                  {d.plot ? ` / ${d.plot}` : ""}
                </td>
                <td className="p-3">{d.appraisal_type || "—"}</td>
                <td className="p-3 max-w-md">
                  <span className="line-clamp-2">{d.appraisal_header || "—"}</span>
                </td>
                <td className="p-3 text-end whitespace-nowrap">
                  {d.pdf_url ? (
                    <div className="flex justify-end gap-1">
                      <Button
                        size="sm"
                        variant="outline"
                        asChild
                        title="פתח PDF בלשונית חדשה"
                      >
                        <a
                          href={api.pdfProxyUrl(d.pdf_url)}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <FileText />
                          פתח
                        </a>
                      </Button>
                      <Button
                        size="sm"
                        variant="ghost"
                        asChild
                        title="הורד PDF"
                      >
                        <a
                          href={api.pdfProxyUrl(d.pdf_url) + "&download=1"}
                          download={`${d.block || "appraisal"}-${d.plot || "0"}-${d.id}.pdf`}
                        >
                          <Download />
                        </a>
                      </Button>
                    </div>
                  ) : (
                    "—"
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}