"use client";

import { format } from "date-fns";
import { Plus } from "lucide-react";
import { useState } from "react";
import {
	KanbanBoard,
	KanbanCard,
	KanbanCards,
	KanbanHeader,
	KanbanProvider,
} from "~/components/ui/kanban";
import { usePotenziali } from "~/providers/PotenzialiProvider";
import type { PotenzialiGroupsId } from "~/schemas/public/PotenzialiGroups";
import type { PotenzialeData } from "~/server/services/potenziali.service";
import {
	Credenza,
	CredenzaBody,
	CredenzaContent,
	CredenzaDescription,
	CredenzaHeader,
	CredenzaTitle,
	CredenzaTrigger,
} from "../custom_ui/credenza";
import Input from "../custom_ui/input";
import { Textarea } from "../custom_ui/textarea";
import { Button } from "../ui/button";
import { Label } from "../ui/label";
import { UserAvatar } from "../user_avatar";

export const Potenziali = () => {
	const { data, columns, setData, updateCall, setEditingId, editingId } =
		usePotenziali();
	return (
		<>
			<KanbanProvider
				className="w-max"
				columns={columns}
				data={data}
				onDataChange={setData}
				onDragEnd={() => {
					updateCall();
				}}
			>
				{(column) => (
					<KanbanBoard
						className="w-fit overflow-auto"
						id={column.id}
						key={column.id}
					>
						<KanbanHeader>
							<div className="flex items-center gap-2">
								<div
									className="h-2 w-2 rounded-full"
									style={{ backgroundColor: column.color }}
								/>
								<span>{column.name}</span>

								<NewCard columnId={column.id} />
							</div>
						</KanbanHeader>
						<KanbanCards className="w-68" id={column.id}>
							{(data: PotenzialeData) => (
								<KanbanCard
									cardOnClick={() => {
										setEditingId(data.id);
									}}
									column={column.id}
									id={data.id}
									key={data.id}
									name={data.name}
								>
									<div className="flex items-start justify-between gap-2">
										<div className="flex flex-col gap-1">
											<p className="m-0 flex-1 font-medium text-sm">
												{data.name}
											</p>
											<p className="m-0 text-muted-foreground text-xs">
												{data.descrizione}
											</p>
										</div>
										{data.userid && (
											<UserAvatar
												className="size-6 shrink-0 text-sm"
												userId={data.userid}
												username={data.username || "Utente"}
											/>
										)}
									</div>
									<p className="mt-2 text-muted-foreground text-xs">
										{format(data.created_at, "dd/MM/yyyy HH:mm")}
									</p>
								</KanbanCard>
							)}
						</KanbanCards>
					</KanbanBoard>
				)}
			</KanbanProvider>
			<Credenza
				onOpenChange={(v) => {
					if (!v) {
						setEditingId(null);
					}
				}}
				open={!!editingId}
			>
				<EditingContent />
			</Credenza>
		</>
	);
};

export const NewColumn = () => {
	const [newColumnName, setNewColumnName] = useState("");
	const { addColumn } = usePotenziali();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button>Nuova colonna</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle className="text-center font-semibold text-2xl">
						Nuova colonna
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">desc</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
					<Label htmlFor="titolo">Titolo</Label>

					<Input
						defaultValue={newColumnName}
						id="titolo"
						onChange={(e) => setNewColumnName(e.target.value)}
						type="string"
					/>
					<Button
						disabled={!newColumnName.length}
						onClick={() => {
							addColumn(newColumnName);
							setNewColumnName("");
						}}
					>
						Aggiungi
					</Button>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};

export const NewCard = ({ columnId }: { columnId: PotenzialiGroupsId }) => {
	const [newItemName, setNewItemName] = useState("");
	const [newItemDescrizione, setNewItemDescrizione] = useState("");
	const { addItem } = usePotenziali();
	return (
		<Credenza>
			<CredenzaTrigger asChild>
				<Button className="ml-auto" size="sm">
					<Plus className="size-4" />
				</Button>
			</CredenzaTrigger>
			<CredenzaContent className="max-h-[90vh]">
				<CredenzaHeader>
					<CredenzaTitle className="text-center font-semibold text-2xl">
						Nuova colonna
					</CredenzaTitle>
					<CredenzaDescription className="sr-only">desc</CredenzaDescription>
				</CredenzaHeader>
				<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto p-2">
					<Label htmlFor="titolo">Titolo</Label>

					<Input
						defaultValue={newItemName}
						id="titolo"
						onChange={(e) => setNewItemName(e.target.value)}
						type="string"
					/>
					<Label htmlFor="descrizione">Descrizione</Label>
					<Textarea
						className="min-h-64"
						defaultValue={newItemDescrizione}
						id="descrizione"
						onChange={(e) => setNewItemDescrizione(e.target.value)}
						placeholder=""
					/>

					<Button
						disabled={!newItemName.length}
						onClick={() => {
							addItem({
								name: newItemName,
								descrizione: newItemDescrizione,
								potenziali_group_id: columnId,
							});
							setNewItemName("");
							setNewItemDescrizione("");
						}}
					>
						Aggiungi
					</Button>
				</CredenzaBody>
			</CredenzaContent>
		</Credenza>
	);
};

const EditingContent = () => {
	const { getEditingItem } = usePotenziali();
	const item = getEditingItem();
	if (!item) return null;
	return (
		<CredenzaContent className="max-h-[90vh]">
			<CredenzaHeader>
				<CredenzaTitle className="text-center font-semibold text-2xl">
					Modifica {item.name}
				</CredenzaTitle>
				<CredenzaDescription className="sr-only">desc</CredenzaDescription>
			</CredenzaHeader>
			<CredenzaBody className="flex max-h-[80vh] flex-col gap-4 overflow-auto pb-5">
				<p>Descrizione: {item.descrizione}</p>
				<p>Creato il: {format(item.created_at, "dd/MM/yyyy HH:mm")}</p>
				<p>Utente Assegnato: {item.userid ? item.username : "Nessuno"}</p>
			</CredenzaBody>
		</CredenzaContent>
	);
};