"use client";

import { useMemo, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Plus, ListTodo, Trash2 } from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input, Label, Select, FieldError } from "@/components/ui/input";
import { Modal } from "@/components/ui/modal";
import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/shared/empty-state";
import { taskSchema, type TaskInput } from "@/lib/validation/schemas";
import { useTranslations, useLocale } from "@/lib/i18n/i18n-provider";
import { formatDate, cn } from "@/lib/utils";
import type { Task, Priority } from "@/types/database";

const PRIORITY_TONE: Record<Priority, "neutral" | "warning" | "danger"> = {
  low: "neutral",
  medium: "warning",
  high: "danger"
};

export function PlanningView({ initialTasks }: { initialTasks: Task[] }) {
  const t = useTranslations();
  const locale = useLocale();
  const [tasks, setTasks] = useState(initialTasks);
  const [modalOpen, setModalOpen] = useState(false);
  const [view, setView] = useState<"daily" | "weekly">("weekly");

  const today = new Date().toISOString().slice(0, 10);
  const weekAhead = new Date();
  weekAhead.setDate(weekAhead.getDate() + 7);
  const weekAheadStr = weekAhead.toISOString().slice(0, 10);

  const visibleTasks = useMemo(() => {
    if (view === "daily") return tasks.filter((t) => t.due_date === today);
    return tasks.filter((t) => !t.due_date || (t.due_date >= today && t.due_date <= weekAheadStr));
  }, [tasks, view, today, weekAheadStr]);

  async function toggleComplete(task: Task) {
    const supabase = createClient();
    const updated = { ...task, completed: !task.completed };
    setTasks((prev) => prev.map((x) => (x.id === task.id ? updated : x)));
    await supabase.from("tasks").update({ completed: updated.completed }).eq("id", task.id);
  }

  async function handleDelete(id: string) {
    const supabase = createClient();
    const prev = tasks;
    setTasks((t) => t.filter((x) => x.id !== id));
    const { error } = await supabase.from("tasks").delete().eq("id", id);
    if (error) setTasks(prev);
  }

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex gap-2">
          <button
            onClick={() => setView("daily")}
            className={cn(
              "rounded-full px-3 py-1.5 text-xs font-medium",
              view === "daily" ? "bg-brand-600 text-white" : "bg-ink-100 text-ink-600"
            )}
          >
            {t("planning.dailyView")}
          </button>
          <button
            onClick={() => setView("weekly")}
            className={cn(
              "rounded-full px-3 py-1.5 text-xs font-medium",
              view === "weekly" ? "bg-brand-600 text-white" : "bg-ink-100 text-ink-600"
            )}
          >
            {t("planning.weeklyView")}
          </button>
        </div>
        <Button onClick={() => setModalOpen(true)}>
          <Plus className="h-4 w-4" /> {t("planning.addTask")}
        </Button>
      </div>

      <Card>
        {visibleTasks.length === 0 ? (
          <EmptyState title={t("planning.empty.title")} cta={t("planning.empty.cta")} onCta={() => setModalOpen(true)} icon={ListTodo} />
        ) : (
          <ul className="divide-y divide-ink-100">
            {visibleTasks.map((task) => (
              <li key={task.id} className="flex items-center gap-3 py-3">
                <input
                  type="checkbox"
                  checked={task.completed}
                  onChange={() => toggleComplete(task)}
                  className="h-4 w-4 rounded border-ink-300 text-brand-600 focus:ring-brand-500"
                  aria-label={task.title}
                />
                <div className="flex-1">
                  <p className={cn("text-sm font-medium", task.completed ? "text-ink-400 line-through" : "text-ink-900")}>
                    {task.title}
                  </p>
                  {task.due_date && <p className="text-xs text-ink-400">{formatDate(task.due_date, locale)}</p>}
                </div>
                <Badge tone={PRIORITY_TONE[task.priority]}>{t(`planning.priority.${task.priority}`)}</Badge>
                <button
                  onClick={() => handleDelete(task.id)}
                  aria-label={t("common.delete")}
                  className="rounded-lg p-1.5 text-ink-300 hover:bg-red-50 hover:text-red-600"
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </li>
            ))}
          </ul>
        )}
      </Card>

      <TaskModal
        open={modalOpen}
        onClose={() => setModalOpen(false)}
        onCreated={(task) => {
          setTasks((prev) => [...prev, task]);
          setModalOpen(false);
        }}
      />
    </div>
  );
}

function TaskModal({
  open,
  onClose,
  onCreated
}: {
  open: boolean;
  onClose: () => void;
  onCreated: (t: Task) => void;
}) {
  const t = useTranslations();
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting }
  } = useForm<TaskInput>({ resolver: zodResolver(taskSchema), defaultValues: { priority: "medium" } });

  async function onSubmit(values: TaskInput) {
    const supabase = createClient();
    const { data: userData } = await supabase.auth.getUser();
    if (!userData.user) return;

    const { data, error } = await supabase
      .from("tasks")
      .insert({
        user_id: userData.user.id,
        title: values.title,
        priority: values.priority,
        due_date: values.dueDate || null
      })
      .select()
      .single();

    if (!error && data) {
      onCreated(data);
      reset();
    }
  }

  return (
    <Modal open={open} onClose={onClose} title={t("planning.addTask")}>
      <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
        <div>
          <Label htmlFor="title">Title</Label>
          <Input id="title" error={errors.title?.message} {...register("title")} />
          <FieldError>{errors.title?.message}</FieldError>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label htmlFor="priority">Priority</Label>
            <Select id="priority" {...register("priority")}>
              <option value="low">{t("planning.priority.low")}</option>
              <option value="medium">{t("planning.priority.medium")}</option>
              <option value="high">{t("planning.priority.high")}</option>
            </Select>
          </div>
          <div>
            <Label htmlFor="dueDate">{t("planning.dueDate")}</Label>
            <Input id="dueDate" type="date" {...register("dueDate")} />
          </div>
        </div>
        <div className="flex justify-end gap-2 pt-2">
          <Button type="button" variant="secondary" onClick={onClose}>
            {t("common.cancel")}
          </Button>
          <Button type="submit" loading={isSubmitting}>
            {t("common.save")}
          </Button>
        </div>
      </form>
    </Modal>
  );
}