"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";

import SummaryCard from "@/components/common/SummaryCard";
import { api } from "@/lib/api";
import type { DashboardSummary, EmptyWidget } from "@/types/dashboard";

function getErrorMessage(error: unknown) {
  if (typeof error === "object" && error !== null && "response" in error) {
    const response = (error as { response?: { data?: { detail?: string } } }).response;
    return response?.data?.detail ?? "Dashboard konnte nicht geladen werden";
  }
  return "Dashboard konnte nicht geladen werden";
}

export default function DashboardPage() {
  const [summary, setSummary] = useState<DashboardSummary | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadSummary = useCallback(async () => {
    try {
      const response = await api.get<DashboardSummary>("/dashboard/summary");
      setSummary(response.data);
    } catch (err) {
      setError(getErrorMessage(err));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    queueMicrotask(() => {
      void loadSummary();
    });
  }, [loadSummary]);

  if (loading) {
    return <div className="rounded-lg border bg-white p-8 text-slate-500">Dashboard wird geladen...</div>;
  }

  if (error || !summary) {
    return <div className="rounded-lg border bg-white p-8 text-red-600">{error || "Keine Dashboarddaten verfügbar"}</div>;
  }

  const cards = [...summary.customers, ...summary.users, ...summary.roles];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-slate-950">Dashboard</h1>
        <p className="mt-1 text-sm text-slate-500">Operative Übersicht für Olympus CRM</p>
      </div>

      {cards.length > 0 ? (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          {cards.map((card) => (
            <SummaryCard key={card.label} label={card.label} value={card.value} />
          ))}
        </div>
      ) : (
        <EmptyPanel widget={{ title: "Keine Kennzahlen", message: "Für deine Berechtigungen sind aktuell keine Kennzahlen verfügbar." }} />
      )}

      <section className="rounded-lg border bg-white p-6">
        <div className="mb-4 flex items-center justify-between">
          <h2 className="text-lg font-semibold text-slate-950">Letzte Kunden</h2>
          {summary.latest_customers.length > 0 && (
            <Link href="/customers" className="text-sm font-medium text-slate-600 hover:text-slate-950">
              Alle Kunden
            </Link>
          )}
        </div>

        {summary.latest_customers.length === 0 ? (
          <p className="text-sm text-slate-500">Noch keine Kundendaten vorhanden.</p>
        ) : (
          <div className="divide-y">
            {summary.latest_customers.map((customer) => (
              <Link key={customer.id} href={`/customers/${customer.id}`} className="flex items-center justify-between py-3 hover:bg-slate-50">
                <div>
                  <p className="font-medium text-slate-950">{customer.company_name}</p>
                  <p className="text-sm text-slate-500">{customer.customer_number}</p>
                </div>
                <span className="text-sm text-slate-500">{customer.status}</span>
              </Link>
            ))}
          </div>
        )}
      </section>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <EmptyPanel widget={summary.activities} />
        <EmptyPanel widget={summary.tasks} />
        <EmptyPanel widget={summary.tickets} />
        <EmptyPanel widget={summary.projects} />
      </div>
    </div>
  );
}

function EmptyPanel({ widget }: { widget: EmptyWidget }) {
  return (
    <div className="rounded-lg border bg-white p-5">
      <h2 className="font-semibold text-slate-950">{widget.title}</h2>
      <p className="mt-2 text-sm text-slate-500">{widget.message}</p>
    </div>
  );
}