"use client";
// src/app/tasks/[id]/page.tsx
import { useEffect, useMemo, useState, useCallback } from "react";
import { useParams, useRouter } from "next/navigation";
import Link from "next/link";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { AppShell } from "@/components/layout/AppShell";
import { Button, Card, CardHeader, CardTitle, CardContent, ConfirmDialog, PriorityBadge } from "@/components/ui/index";
import { Select, Input, Textarea } from "@/components/ui/index";
import { formatDate, formatRelativeTime, getLabel, TASK_STATUS_LABELS, TASK_STATUS_LABELS_AR } from "@/lib/utils";
import { createTaskFormSchema, type TaskFormValues } from "@/lib/validations";
import { EntityCustomFieldsFormInputs, EntityCustomFieldsReadOnly } from "@/components/custom-fields/EntityCustomFieldsSection";
import type { CustomFieldDefinitionDto } from "@/lib/customFields.shared";
import { toast } from "sonner";
import { useAuth } from "@/hooks/useAuth";
import { useLanguage } from "@/i18n/LanguageContext";
import { hasPermission } from "@/lib/permissions";
import { Trash2, Loader2, AlertCircle, CheckCircle2, Circle, Calendar, User } from "lucide-react";

const STATUS_COLORS: Record<string, string> = {
  TODO: "bg-gray-100 text-gray-600",
  IN_PROGRESS: "bg-blue-100 text-blue-700",
  DONE: "bg-green-100 text-green-700",
  CANCELLED: "bg-gray-100 text-gray-400",
};

export default function TaskDetailPage() {
  const { id } = useParams() as { id: string };
  const router = useRouter();
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [task, setTask] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [deleteOpen, setDeleteOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [users, setUsers] = useState<any[]>([]);

  const canEdit = user && hasPermission(user.role, "tasks:update");
  const canDelete = user && hasPermission(user.role, "tasks:delete");

  const definitions = useMemo(
    () => (task?.customFieldData?.definitions ?? []) as CustomFieldDefinitionDto[],
    [task]
  );

  const taskFormSchemaResolved = useMemo(
    () => createTaskFormSchema(t, definitions),
    [t, definitions]
  );

  const { register, handleSubmit, control, reset, formState: { errors } } = useForm<TaskFormValues>({
    resolver: zodResolver(taskFormSchemaResolved),
  });

  const fetchTask = useCallback(async () => {
    try {
      const res = await fetch(`/api/tasks/${id}`);
      if (!res.ok) throw new Error("Not found");
      const data = (await res.json()).data;
      setTask(data);
      const defs = data.customFieldData?.definitions ?? [];
      const cf: Record<string, string> = {};
      for (const d of defs) {
        cf[d.fieldName] = data.customFieldData?.values?.[d.fieldName] ?? "";
      }
      reset({
        title: data.title,
        description: data.description ?? "",
        priority: data.priority,
        status: data.status,
        dueDate: data.dueDate ? data.dueDate.slice(0, 10) : "",
        assignedToId: data.assignedToId ?? "",
        leadId: data.leadId ?? "",
        opportunityId: data.opportunityId ?? "",
        customFields: cf,
      });
    } catch (e: any) {
      setError(e.message);
    } finally {
      setIsLoading(false);
    }
  }, [id, reset]);

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

  useEffect(() => {
    fetch("/api/users/assignable?pageSize=100")
      .then(r => r.json())
      .then(d => setUsers(d.data?.items ?? []));
  }, []);

  const handleToggleDone = async () => {
    const newStatus = task.status === "DONE" ? "TODO" : "DONE";
    try {
      const res = await fetch(`/api/tasks/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      });
      if (!res.ok) throw new Error("Failed");
      toast.success(newStatus === "DONE" ? t("tasks.toastDone") : t("tasks.toastReopenedOk"));
      fetchTask();
    } catch { toast.error(t("tasks.toastUpdateErr")); }
  };

  const onSubmit = async (data: TaskFormValues) => {
    setIsSaving(true);
    try {
      const { customFields, ...rest } = data;
      const payload: Record<string, unknown> = { ...rest };
      if (definitions.length) {
        payload.customFields = customFields;
      }
      const res = await fetch(`/api/tasks/${id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error((await res.json()).error ?? "Failed");
      toast.success(t("tasks.toastSaved"));
      setIsEditing(false);
      fetchTask();
    } catch (e: any) { toast.error(e.message); }
    finally { setIsSaving(false); }
  };

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await fetch(`/api/tasks/${id}`, { method: "DELETE" });
      toast.success(t("tasks.toastRemoved"));
      router.push("/tasks");
    } catch { toast.error(t("tasks.toastUpdateErr")); }
    finally { setIsDeleting(false); }
  };

  if (isLoading) return (
    <AppShell breadcrumbs={[{ label: t("tasks.title"), href: "/tasks" }, { label: t("common.breadcrumbLoading") }]}>
      <div className="flex justify-center h-64 items-center">
        <Loader2 className="w-8 h-8 animate-spin text-primary" />
      </div>
    </AppShell>
  );

  if (error || !task) return (
    <AppShell breadcrumbs={[{ label: t("tasks.title"), href: "/tasks" }, { label: t("common.breadcrumbNotFound") }]}>
      <div className="flex flex-col items-center justify-center h-64 gap-4">
        <AlertCircle className="w-12 h-12 text-destructive" />
        <p>{error ?? t("tasks.notFoundMsg")}</p>
        <Button variant="outline" onClick={() => router.push("/tasks")}>{t("tasks.backToList")}</Button>
      </div>
    </AppShell>
  );

  const isOverdue = task.dueDate && new Date(task.dueDate) < new Date() && task.status !== "DONE";

  return (
    <AppShell breadcrumbs={[{ label: t("tasks.title"), href: "/tasks" }, { label: task.title }]}>
      <div className="w-full min-w-0">
        {/* Header */}
        <div className="flex items-start justify-between gap-4 mb-6">
          <div className="flex items-start gap-3 flex-1">
            <button
              onClick={handleToggleDone}
              className="mt-1 flex-shrink-0 text-muted-foreground hover:text-primary transition-colors"
            >
              {task.status === "DONE"
                ? <CheckCircle2 className="w-6 h-6 text-green-500" />
                : <Circle className="w-6 h-6" />}
            </button>
            <div>
              <h1 className={`text-xl font-bold ${task.status === "DONE" ? "line-through text-muted-foreground" : "text-foreground"}`}>
                {task.title}
              </h1>
              <div className="flex items-center gap-2 mt-1 flex-wrap">
                <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${STATUS_COLORS[task.status] ?? "bg-gray-100"}`}>
                  {getLabel(TASK_STATUS_LABELS, TASK_STATUS_LABELS_AR, task.status, language)}
                </span>
                <PriorityBadge priority={task.priority} />
                {isOverdue && (
                  <span className="text-xs text-red-500 font-medium flex items-center gap-1">
                    ⚠ {t("tasks.overdue")}
                  </span>
                )}
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            {canEdit && !isEditing && (
              <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>{t("common.edit")}</Button>
            )}
            {isEditing && (
              <Button variant="ghost" size="sm" onClick={() => setIsEditing(false)}>{t("common.cancel")}</Button>
            )}
            {canDelete && (
              <Button variant="destructive" size="sm" onClick={() => setDeleteOpen(true)}>
                <Trash2 className="w-4 h-4" />
              </Button>
            )}
          </div>
        </div>

        {isEditing ? (
          /* Edit Form */
          <form noValidate onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <Card>
              <CardHeader><CardTitle>{t("tasks.editCardTitle")}</CardTitle></CardHeader>
              <CardContent className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Input label={t("tasks.fieldTitle")} required className="sm:col-span-2"
                  error={errors.title?.message} {...register("title")} />
                <Controller
                  name="priority"
                  control={control}
                  render={({ field }) => (
                    <Select label={t("common.priority")} required options={[
                      { value: "LOW", label: t("tasks.priorityLow") }, { value: "MEDIUM", label: t("tasks.priorityMedium") },
                      { value: "HIGH", label: t("tasks.priorityHigh") }, { value: "URGENT", label: t("tasks.priorityUrgent") },
                    ]} error={errors.priority?.message}
                    value={field.value}
                    onChange={field.onChange}
                    onBlur={field.onBlur}
                    name={field.name}
                    ref={field.ref}
                    />
                  )}
                />
                <Controller
                  name="status"
                  control={control}
                  render={({ field }) => (
                    <Select label={t("common.status")} required options={[
                      { value: "TODO", label: t("tasks.statusTodo") }, { value: "IN_PROGRESS", label: t("tasks.statusInProgress") },
                      { value: "DONE", label: t("tasks.statusDone") }, { value: "CANCELLED", label: t("tasks.statusCancelled") },
                    ]} error={errors.status?.message}
                    value={field.value}
                    onChange={field.onChange}
                    onBlur={field.onBlur}
                    name={field.name}
                    ref={field.ref}
                    />
                  )}
                />
                <Input label={t("tasks.dueDate")} type="date" {...register("dueDate")} />
                <Controller
                  name="assignedToId"
                  control={control}
                  render={({ field }) => (
                    <Select label={t("tasks.labelAssignedTo")}
                      options={users.map(u => ({ value: u.id, label: u.name }))}
                      placeholder={t("common.unassigned")}
                      value={field.value ?? ""}
                      onChange={field.onChange}
                      onBlur={field.onBlur}
                      name={field.name}
                      ref={field.ref}
                    />
                  )}
                />
                <Textarea label={t("tasks.descCard")} rows={3} className="sm:col-span-2"
                  placeholder={t("tasks.descPlaceholder")} {...register("description")} />
                <EntityCustomFieldsFormInputs definitions={definitions} register={register} errors={errors} />
              </CardContent>
            </Card>
            <div className="flex justify-end gap-3">
              <Button type="button" variant="outline" onClick={() => setIsEditing(false)} disabled={isSaving}>{t("common.cancel")}</Button>
              <Button type="submit" loading={isSaving}>{t("tasks.saveChanges")}</Button>
            </div>
          </form>
        ) : (
          /* View Mode */
          <div className="space-y-6">
            {task.description && (
              <Card>
                <CardHeader><CardTitle>{t("tasks.descCard")}</CardTitle></CardHeader>
                <CardContent>
                  <p className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
                    {task.description}
                  </p>
                </CardContent>
              </Card>
            )}

            <Card>
              <CardHeader><CardTitle>{t("common.details")}</CardTitle></CardHeader>
              <CardContent className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("common.status")}</p>
                  <span className={`text-sm font-medium px-2 py-0.5 rounded-full ${STATUS_COLORS[task.status]}`}>
                    {getLabel(TASK_STATUS_LABELS, TASK_STATUS_LABELS_AR, task.status, language)}
                  </span>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("common.priority")}</p>
                  <PriorityBadge priority={task.priority} />
                </div>
                <div>
                  <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("tasks.dueDate")}</p>
                  <p className={`text-sm font-medium flex items-center gap-1.5 ${isOverdue ? "text-red-500" : ""}`}>
                    <Calendar className="w-3.5 h-3.5" />
                    {task.dueDate ? formatDate(task.dueDate, language) : "—"}
                    {isOverdue && ` (${t("tasks.overdue")})`}
                  </p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("tasks.labelAssignedTo")}</p>
                  <p className="text-sm font-medium flex items-center gap-1.5">
                    <User className="w-3.5 h-3.5 text-muted-foreground" />
                    {task.assignedTo?.name ?? t("common.unassigned")}
                  </p>
                </div>
                {task.completedAt && (
                  <div>
                    <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("tasks.labelCompletedAt")}</p>
                    <p className="text-sm text-green-600 font-medium">{formatDate(task.completedAt, language)}</p>
                  </div>
                )}
                <div>
                  <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide mb-1">{t("common.createdAt")}</p>
                  <p className="text-sm text-muted-foreground">{formatRelativeTime(task.createdAt, language)}</p>
                </div>
                <EntityCustomFieldsReadOnly
                  embed
                  definitions={task.customFieldData?.definitions ?? []}
                  values={task.customFieldData?.values ?? {}}
                />
              </CardContent>
            </Card>

            {/* Related entities */}
            {(task.lead || task.opportunity) && (
              <Card>
                <CardHeader><CardTitle>{t("tasks.relatedTo")}</CardTitle></CardHeader>
                <CardContent className="space-y-2">
                  {task.lead && (
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">{t("tasks.fieldLead")}</span>
                      <Link href={`/leads/${task.lead.id}`} className="text-sm text-primary hover:underline font-medium">
                        {task.lead.firstName} {task.lead.lastName}
                      </Link>
                    </div>
                  )}
                  {task.opportunity && (
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">{t("tasks.fieldOpportunity")}</span>
                      <Link href={`/deals/${task.opportunity.id}`} className="text-sm text-primary hover:underline font-medium">
                        {task.opportunity.title}
                      </Link>
                    </div>
                  )}
                </CardContent>
              </Card>
            )}
          </div>
        )}
      </div>

      <ConfirmDialog
        open={deleteOpen} onClose={() => setDeleteOpen(false)} onConfirm={handleDelete}
        isLoading={isDeleting} title={t("tasks.deleteTitle")}
        description={t("tasks.deletePermanent")}
        confirmLabel={t("common.delete")} variant="destructive"
      />
    </AppShell>
  );
}