"use client";

import { Plus, Search, SlidersHorizontal, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

type Column<T> = { key: keyof T; label: string; render?: (row: T) => React.ReactNode };

export function ModulePage<T extends { id: string; status?: string }>({
  title,
  breadcrumb,
  rows,
  columns,
}: {
  title: string;
  breadcrumb: string;
  rows: T[];
  columns: Column<T>[];
}) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const filtered = useMemo(() => rows.filter((row) => JSON.stringify(row).toLowerCase().includes(query.toLowerCase())), [query, rows]);

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="text-sm text-muted-foreground">{breadcrumb}</p>
          <h1 className="mt-1 text-2xl font-semibold tracking-normal">{title}</h1>
        </div>
        <Button onClick={() => setOpen(true)}><Plus className="h-4 w-4" />Novo</Button>
      </div>

      <Card className="overflow-hidden">
        <div className="flex flex-col gap-3 border-b p-4 md:flex-row">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
            <Input value={query} onChange={(event) => setQuery(event.target.value)} className="pl-9" placeholder="Pesquisa rapida" />
          </div>
          <Button variant="secondary"><SlidersHorizontal className="h-4 w-4" />Filtros</Button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full min-w-[760px] text-sm">
            <thead className="bg-muted/60 text-left text-xs uppercase text-muted-foreground">
              <tr>{columns.map((column) => <th key={String(column.key)} className="px-4 py-3 font-medium">{column.label}</th>)}<th className="w-12 px-4" /></tr>
            </thead>
            <tbody>
              {filtered.map((row) => (
                <tr key={row.id} className="border-t transition hover:bg-muted/40">
                  {columns.map((column) => (
                    <td key={String(column.key)} className="px-4 py-3">
                      {column.render ? column.render(row) : String(row[column.key])}
                    </td>
                  ))}
                  <td className="px-4"><Button variant="ghost" size="icon" onClick={() => confirm("Confirmar exclusao?")}><Trash2 className="h-4 w-4" /></Button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="flex items-center justify-between border-t px-4 py-3 text-sm text-muted-foreground">
          <span>{filtered.length ? `${filtered.length} registros encontrados` : "Nenhum registro encontrado"}</span>
          <div className="flex gap-2"><Button variant="secondary" size="sm">Anterior</Button><Button variant="secondary" size="sm">Proxima</Button></div>
        </div>
      </Card>

      {open && (
        <div className="fixed inset-0 z-50 grid place-items-center bg-black/40 p-4">
          <Card className="w-full max-w-2xl p-5 shadow-panel">
            <div className="flex items-center justify-between">
              <h2 className="text-lg font-semibold">Novo registro</h2>
              <Button variant="ghost" onClick={() => setOpen(false)}>Fechar</Button>
            </div>
            <div className="mt-5 grid gap-3 md:grid-cols-2">
              <Input placeholder="Nome / descricao" />
              <Input placeholder="Documento / codigo" />
              <Input placeholder="Email / categoria" />
              <Input placeholder="Telefone / status" />
            </div>
            <div className="mt-5 flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setOpen(false)}>Cancelar</Button>
              <Button onClick={() => setOpen(false)}>Salvar</Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}

export function StatusBadge({ value }: { value: string }) {
  const tone = value.includes("Disponivel") || value.includes("Ativo") || value.includes("Pago") ? "green" : value.includes("Atrasado") || value.includes("Manutencao") ? "red" : "blue";
  return <Badge tone={tone}>{value}</Badge>;
}