import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { Pencil, Plus, Clock, Repeat } from "lucide-react";

import { PageHeader } from "@/components/page-header";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { categoryLabel } from "@/lib/mock/services";
import { formatBRL } from "@/lib/format";
import { useServices } from "@/lib/store/services-store";
import { ServiceFormDialog } from "@/components/service-form-dialog";
import type { Service } from "@/lib/mock/types";

export const Route = createFileRoute("/_admin/servicos")({
  component: ServicosPage,
});

function ServicosPage() {
  const services = useServices();
  const [open, setOpen] = useState(false);
  const [editing, setEditing] = useState<Service | null>(null);

  const handleNew = () => {
    setEditing(null);
    setOpen(true);
  };
  const handleEdit = (s: Service) => {
    setEditing(s);
    setOpen(true);
  };

  return (
    <div className="space-y-8">
      <PageHeader
        title="Serviços"
        description="Catálogo de serviços e produtos da X3 Sites usados nas propostas."
        actions={
          <Button
            onClick={handleNew}
            className="bg-gradient-brand text-white shadow-soft"
          >
            <Plus className="h-4 w-4" /> Novo serviço
          </Button>
        }
      />

      <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        {services.map((s) => (
          <Card
            key={s.id}
            className="group relative overflow-hidden border-border/60 shadow-soft transition hover:-translate-y-1 hover:shadow-glow"
          >
            <div className="absolute inset-x-0 top-0 h-1 bg-gradient-brand opacity-70 transition group-hover:opacity-100" />
            <CardContent className="space-y-4 p-5">
              <div className="flex items-start justify-between gap-3">
                <div>
                  <Badge variant="outline" className="mb-2 border-primary/30 bg-primary/5 text-primary">
                    {categoryLabel[s.category]}
                  </Badge>
                  <h3 className="font-display text-lg font-semibold leading-tight">
                    {s.name}
                  </h3>
                  {!s.active && (
                    <Badge variant="outline" className="mt-1 border-muted-foreground/30 text-muted-foreground">
                      Inativo
                    </Badge>
                  )}
                </div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 shrink-0"
                  onClick={() => handleEdit(s)}
                  title="Editar serviço"
                >
                  <Pencil className="h-4 w-4" />
                </Button>
              </div>

              <p className="text-sm text-muted-foreground">{s.shortDescription}</p>

              <ul className="space-y-1.5 text-sm">
                {s.deliverables.slice(0, 3).map((d) => (
                  <li key={d} className="flex items-start gap-2">
                    <span className="mt-2 h-1 w-1 shrink-0 rounded-full bg-brand-cyan" />
                    <span className="text-foreground/80">{d}</span>
                  </li>
                ))}
              </ul>

              <div className="flex items-end justify-between border-t border-border/60 pt-4">
                <div>
                  <div className="text-xs text-muted-foreground">A partir de</div>
                  <div className="font-display text-xl font-semibold text-foreground">
                    {formatBRL(s.basePrice)}
                    {s.recurring && (
                      <span className="ml-1 text-xs font-normal text-muted-foreground">
                        /{s.recurring === "mensal" ? "mês" : "ano"}
                      </span>
                    )}
                  </div>
                </div>
                <div className="flex items-center gap-3 text-xs text-muted-foreground">
                  {s.recurring ? (
                    <span className="flex items-center gap-1">
                      <Repeat className="h-3.5 w-3.5" /> Recorrente
                    </span>
                  ) : (
                    <span className="flex items-center gap-1">
                      <Clock className="h-3.5 w-3.5" /> {s.defaultDeadlineDays}d
                    </span>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <ServiceFormDialog open={open} onOpenChange={setOpen} service={editing} />
    </div>
  );
}