"use client";

import { ActionButtonWithTooltip } from "@/components/ui/action-button";
import { ButtonWithTooltip } from "@/components/ui/button";
import LoadingSpinner from "@/components/ui/spinner";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { Pencil, Trash, FilePlus, Palette } from "lucide-react";
import { useSession } from "next-auth/react";
import AddMetricDialog from "./AddMetricDialog";
import Link from "next/link";
import { ZMetric } from "@lifetracker/shared/types/metrics";
import { titleCase } from "title-case";
import { Icon } from "@/components/ui/icon";

export default function MetricsView() {
    const { data: metrics } = api.metrics.list.useQuery();
    const invalidateMetricsList = api.useUtils().metrics.list.invalidate;

    const { mutate: deleteMetric } = api.metrics.delete.useMutation({
        onSettled: () => {
            invalidateMetricsList();
            toast({
                description: "Metric deleted",
            });
        },
    });

    const MetricsTable = ({ metrics }: { metrics: ZMetric[] }) => (
        <Table>
            <TableHeader className="bg-gray-200">
                <TableHead>Name</TableHead>
                <TableHead>Unit</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>Actions</TableHead>
            </TableHeader>
            <TableBody>
                {metrics.map((m) => (
                    <TableRow key={m.id} style={{ borderBottom: 0 }}>
                        <TableCell className="py-1 flex items-center gap-4">
                            <Icon name={titleCase(m.icon)} size={32} />
                            <span>{m.name}</span>
                        </TableCell>
                        <TableCell className="py-1">{m.unit}</TableCell>
                        <TableCell className="py-1">{m.type}</TableCell>
                        <TableCell className="py-1">{m.description}</TableCell>
                        <TableCell className="flex gap-1 py-1">
                            <AddMetricDialog initialMetric={m} >
                                <ButtonWithTooltip
                                    tooltip="Edit"
                                    variant="outline"
                                >
                                    <Pencil size={16} color="white" />
                                </ButtonWithTooltip>
                            </AddMetricDialog>
                        </TableCell>
                    </TableRow>
                ))}
            </TableBody>
        </Table >
    );

    return (
        <>
            <div className="mb-2 flex items-center justify-between text-xl font-medium">
                <span>All Metrics</span>
                <div className="flex">
                    <AddMetricDialog>
                        <ButtonWithTooltip tooltip="Start tracking something..." variant="outline">
                            <FilePlus size={16} />
                        </ButtonWithTooltip>
                    </AddMetricDialog>
                </div></div>

            {metrics === undefined ? (
                <LoadingSpinner />
            ) : (
                <MetricsTable metrics={metrics} />
            )}
        </>
    );
}