"use client";

import { useState } from "react";
import { Modal } from "@/components/ui/modal";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Select } from "@/components/ui/select";
import { TagPicker } from "./tag-picker";
import type {
  Tag,
  Project,
  Goal,
  Priority,
  TaskStatus,
  RecurrencePattern,
  TaskReviewStatus,
} from "@/types";
import type { TaskWithRelations } from "@/hooks/use-tasks";
import { useTeams } from "@/hooks/use-teams";
import { useWorkspaceStore } from "@/stores/workspace-store";

interface TaskFormProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: TaskFormData) => Promise<void>;
  task?: TaskWithRelations | null;
  projects: Project[];
  goals: Goal[];
  tags: Tag[];
  onCreateTag: (name: string, color: string) => Promise<Tag>;
  defaultProjectId?: string | null;
}

export interface TaskFormData {
  title: string;
  description: string;
  priority: Priority;
  status: TaskStatus;
  deadline: string | null;
  project_id: string | null;
  goal_id: string | null;
  assignee_id: string | null;
  reviewer_id: string | null;
  review_status: TaskReviewStatus;
  tag_ids: string[];
  recurrence_pattern: RecurrencePattern;
  recurrence_interval: number;
}

const PRIORITIES: { value: Priority; label: string }[] = [
  { value: "none", label: "No priority" },
  { value: "low", label: "Low" },
  { value: "medium", label: "Medium" },
  { value: "high", label: "High" },
  { value: "urgent", label: "Urgent" },
];

const STATUSES: { value: TaskStatus; label: string }[] = [
  { value: "todo", label: "To do" },
  { value: "in_progress", label: "In progress" },
  { value: "done", label: "Done" },
  { value: "cancelled", label: "Cancelled" },
];

const RECURRENCE_OPTIONS: { value: RecurrencePattern; label: string }[] = [
  { value: "none", label: "Does not repeat" },
  { value: "daily", label: "Daily" },
  { value: "weekly", label: "Weekly" },
  { value: "monthly", label: "Monthly" },
];

const REVIEW_OPTIONS: { value: TaskReviewStatus; label: string }[] = [
  { value: "not_required", label: "No review" },
  { value: "pending_review", label: "Needs review" },
  { value: "changes_requested", label: "Changes requested" },
  { value: "approved", label: "Approved" },
];

export function TaskForm({
  open,
  onClose,
  onSubmit,
  task,
  projects,
  goals,
  tags,
  onCreateTag,
  defaultProjectId,
}: TaskFormProps) {
  const isEditing = !!task;
  const activeTeamId = useWorkspaceStore((state) => state.activeTeamId);
  const { activeMembers } = useTeams();

  const [title, setTitle] = useState(task?.title || "");
  const [description, setDescription] = useState(task?.description || "");
  const [priority, setPriority] = useState<Priority>(task?.priority || "none");
  const [status, setStatus] = useState<TaskStatus>(task?.status || "todo");
  const [deadline, setDeadline] = useState(
    task?.deadline ? task.deadline.slice(0, 10) : ""
  );
  const [projectId, setProjectId] = useState(
    task?.project_id || defaultProjectId || ""
  );
  const [goalId, setGoalId] = useState(task?.goal_id || "");
  const [assigneeId, setAssigneeId] = useState(task?.assignee_id || "");
  const [reviewerId, setReviewerId] = useState(task?.reviewer_id || "");
  const [reviewStatus, setReviewStatus] = useState<TaskReviewStatus>(
    task?.review_status || "not_required"
  );
  const [recurrencePattern, setRecurrencePattern] = useState<RecurrencePattern>(
    task?.recurrence_pattern || "none"
  );
  const [recurrenceInterval, setRecurrenceInterval] = useState(
    String(task?.recurrence_interval || 1)
  );
  const [selectedTagIds, setSelectedTagIds] = useState<string[]>(
    task?.tags?.map((t) => t.id) || []
  );
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!title.trim() || submitting) return;

    setSubmitting(true);
    await onSubmit({
      title: title.trim(),
      description: description.trim(),
      priority,
      status,
      deadline: deadline ? new Date(deadline + "T00:00:00").toISOString() : null,
      project_id: projectId || null,
      goal_id: goalId || null,
      assignee_id: assigneeId || null,
      reviewer_id: reviewerId || null,
      review_status: reviewerId ? reviewStatus : "not_required",
      tag_ids: selectedTagIds,
      recurrence_pattern: recurrencePattern,
      recurrence_interval:
        recurrencePattern === "none"
          ? 1
          : Math.max(Number.parseInt(recurrenceInterval || "1", 10) || 1, 1),
    });
    setSubmitting(false);
    onClose();
  }

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={isEditing ? "Edit task" : "New task"}
      className="max-w-lg"
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        {/* Title */}
        <div className="space-y-1.5">
          <Input
            placeholder="Task title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="text-base font-medium border-0 px-0 focus-visible:ring-0 shadow-none"
            autoFocus
            required
          />
        </div>

        {/* Description */}
        <div className="space-y-1.5">
          <Textarea
            placeholder="Add a description..."
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="min-h-[60px] border-0 px-0 focus-visible:ring-0 shadow-none text-sm"
          />
        </div>

        {/* Fields grid */}
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Status</Label>
            <Select
              value={status}
              onChange={(e) => setStatus(e.target.value as TaskStatus)}
            >
              {STATUSES.map((s) => (
                <option key={s.value} value={s.value}>
                  {s.label}
                </option>
              ))}
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Priority</Label>
            <Select
              value={priority}
              onChange={(e) => setPriority(e.target.value as Priority)}
            >
              {PRIORITIES.map((p) => (
                <option key={p.value} value={p.value}>
                  {p.label}
                </option>
              ))}
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Deadline</Label>
            <Input
              type="date"
              value={deadline}
              onChange={(e) => setDeadline(e.target.value)}
            />
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Project</Label>
            <Select
              value={projectId}
              onChange={(e) => setProjectId(e.target.value)}
            >
              <option value="">No project</option>
              {projects.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.icon} {p.name}
                </option>
              ))}
            </Select>
          </div>

          {goals.length > 0 && (
            <div className="space-y-1.5">
              <Label className="text-xs text-muted-foreground">Aligned goal</Label>
              <Select
                value={goalId}
                onChange={(e) => setGoalId(e.target.value)}
              >
                <option value="">No linked goal</option>
                {goals.map((goal) => (
                  <option key={goal.id} value={goal.id}>
                    {goal.icon} {goal.title}
                  </option>
                ))}
              </Select>
            </div>
          )}

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Repeat</Label>
            <Select
              value={recurrencePattern}
              onChange={(e) =>
                setRecurrencePattern(e.target.value as RecurrencePattern)
              }
            >
              {RECURRENCE_OPTIONS.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </Select>
          </div>

          <div className="space-y-1.5">
            <Label className="text-xs text-muted-foreground">Interval</Label>
            <Input
              type="number"
              min={1}
              value={recurrenceInterval}
              onChange={(e) => setRecurrenceInterval(e.target.value)}
              disabled={recurrencePattern === "none"}
            />
          </div>

          {activeTeamId && (
            <div className="space-y-1.5">
              <Label className="text-xs text-muted-foreground">Assignee</Label>
              <Select
                value={assigneeId}
                onChange={(e) => setAssigneeId(e.target.value)}
              >
                <option value="">Unassigned</option>
                {activeMembers.map((member) => (
                  <option key={member.user_id} value={member.user_id}>
                    {member.profile?.full_name || member.profile?.email || "Unknown member"}
                    {member.title ? ` - ${member.title}` : ""}
                  </option>
                ))}
              </Select>
            </div>
          )}

          {activeTeamId && (
            <div className="space-y-1.5">
              <Label className="text-xs text-muted-foreground">Reviewer</Label>
              <Select
                value={reviewerId}
                onChange={(e) => {
                  const nextReviewerId = e.target.value;
                  setReviewerId(nextReviewerId);
                  if (!nextReviewerId) {
                    setReviewStatus("not_required");
                  } else if (reviewStatus === "not_required") {
                    setReviewStatus("pending_review");
                  }
                }}
              >
                <option value="">No reviewer</option>
                {activeMembers.map((member) => (
                  <option key={member.user_id} value={member.user_id}>
                    {member.profile?.full_name || member.profile?.email || "Unknown member"}
                    {member.title ? ` - ${member.title}` : ""}
                  </option>
                ))}
              </Select>
            </div>
          )}

          {activeTeamId && (
            <div className="space-y-1.5 col-span-2">
              <Label className="text-xs text-muted-foreground">Review flow</Label>
              <Select
                value={reviewStatus}
                onChange={(e) => setReviewStatus(e.target.value as TaskReviewStatus)}
                disabled={!reviewerId}
              >
                {REVIEW_OPTIONS.map((option) => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </Select>
            </div>
          )}
        </div>

        {/* Tags */}
        <div className="space-y-1.5">
          <Label className="text-xs text-muted-foreground">Tags</Label>
          <TagPicker
            tags={tags}
            selectedIds={selectedTagIds}
            onChange={setSelectedTagIds}
            onCreateTag={onCreateTag}
          />
        </div>

        {/* Actions */}
        <div className="flex justify-end gap-2 pt-2">
          <Button type="button" variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button type="submit" disabled={!title.trim() || submitting}>
            {submitting
              ? isEditing
                ? "Saving..."
                : "Creating..."
              : isEditing
              ? "Save changes"
              : "Create task"}
          </Button>
        </div>
      </form>
    </Modal>
  );
}