import { useState } from 'react';
import {
  Calendar,
  User,
  CircleDot,
  FolderOpen,
  Zap,
  Pencil,
  Trash2,
  Send,
} from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Input } from '@/components/ui/input';
import { ScrollArea } from '@/components/ui/scroll-area';
import { trpc } from '@/lib/trpc';
import { PriorityBadge } from './PriorityBadge';
import { parseAssignees, type TaskItem } from './TaskRow';

function formatDate(timestamp: number): string {
  const d = new Date(timestamp);
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  const date = `${months[d.getMonth()]} ${String(d.getDate()).padStart(2, '0')}, ${d.getFullYear()}`;
  if (d.getHours() === 0 && d.getMinutes() === 0) return date;
  const h = String(d.getHours()).padStart(2, '0');
  const m = String(d.getMinutes()).padStart(2, '0');
  return `${date} ${h}:${m}`;
}

function relativeTime(timestamp: number): string {
  const diff = Date.now() - timestamp;
  const minutes = Math.floor(diff / 60000);
  if (minutes < 1) return 'just now';
  if (minutes < 60) return `${minutes} min ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} hr ago`;
  const days = Math.floor(hours / 24);
  return `${days}d ago`;
}

const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
  todo: { label: 'To Do', className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' },
  in_progress: { label: 'In Progress', className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300' },
  done: { label: 'Done', className: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' },
};

function AuthorAvatar({ name }: { name: string }) {
  const initials = name
    .split(/\s+/)
    .slice(0, 2)
    .map((w) => w[0]?.toUpperCase() ?? '')
    .join('');
  return (
    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium">
      {initials}
    </div>
  );
}

interface TaskDetailDialogProps {
  task: TaskItem | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onEdit: (task: TaskItem) => void;
  onDelete: (id: string) => void;
}

export function TaskDetailDialog({ task, open, onOpenChange, onEdit, onDelete }: TaskDetailDialogProps) {
  const [commentText, setCommentText] = useState('');
  const [activeTab, setActiveTab] = useState('description');

  const { data: comments } = trpc.taskComments.list.useQuery(
    { taskId: task?.id ?? '' },
    { enabled: !!task },
  );

  const utils = trpc.useUtils();

  const addComment = trpc.taskComments.create.useMutation({
    onSuccess: () => {
      void utils.taskComments.list.invalidate({ taskId: task?.id ?? '' });
      setCommentText('');
    },
  });

  const deleteComment = trpc.taskComments.delete.useMutation({
    onSuccess: () => {
      void utils.taskComments.list.invalidate({ taskId: task?.id ?? '' });
    },
  });

  if (!task) return null;

  const assignees = parseAssignees(task.assignee);
  const statusConf = STATUS_CONFIG[task.status ?? 'todo'] ?? { label: 'To Do', className: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300' };
  const breadcrumb = [task.clientName, task.subClientName, task.projectName].filter(Boolean);

  const handleAddComment = () => {
    const text = commentText.trim();
    if (!text) return;
    addComment.mutate({ taskId: task.id, author: 'Me', content: text });
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[620px] gap-0 p-0" aria-describedby={undefined}>
        {/* Header */}
        <DialogHeader className="px-6 pt-6 pb-4">
          <DialogTitle className="text-lg font-semibold leading-tight">{task.title}</DialogTitle>
        </DialogHeader>

        <Separator />

        {/* Field rows */}
        <div className="grid grid-cols-[120px_1fr] gap-y-3 px-6 py-4 text-sm">
          {/* Assignee */}
          <div className="flex items-center gap-2 text-muted-foreground">
            <User className="h-4 w-4" />
            Assignee
          </div>
          <div className="flex flex-wrap items-center gap-1.5">
            {assignees.length > 0 ? (
              assignees.map((name) => (
                <Badge key={name} variant="secondary" className="text-xs">
                  {name}
                </Badge>
              ))
            ) : (
              <span className="text-muted-foreground">Unassigned</span>
            )}
          </div>

          {/* Status */}
          <div className="flex items-center gap-2 text-muted-foreground">
            <CircleDot className="h-4 w-4" />
            Status
          </div>
          <div>
            <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusConf.className}`}>
              {statusConf.label}
            </span>
          </div>

          {/* Due date */}
          <div className="flex items-center gap-2 text-muted-foreground">
            <Calendar className="h-4 w-4" />
            Due date
          </div>
          <div>
            {task.dueDate ? formatDate(task.dueDate) : <span className="text-muted-foreground">No due date</span>}
          </div>

          {/* Priority */}
          <div className="flex items-center gap-2 text-muted-foreground">
            <Zap className="h-4 w-4" />
            Priority
          </div>
          <div>
            <PriorityBadge priority={task.priority} />
          </div>

          {/* Project */}
          {breadcrumb.length > 0 && (
            <>
              <div className="flex items-center gap-2 text-muted-foreground">
                <FolderOpen className="h-4 w-4" />
                Project
              </div>
              <div className="text-sm">{breadcrumb.join(' > ')}</div>
            </>
          )}
        </div>

        <Separator />

        {/* Tabs: Description / Comment */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col">
          <TabsList className="mx-6 mt-3 w-fit">
            <TabsTrigger value="description">Description</TabsTrigger>
            <TabsTrigger value="comment">Comment</TabsTrigger>
          </TabsList>

          <TabsContent value="description" className="px-6 py-4 min-h-[120px]">
            {task.description ? (
              <p className="text-sm whitespace-pre-wrap">{task.description}</p>
            ) : (
              <p className="text-sm text-muted-foreground italic">No description provided.</p>
            )}
          </TabsContent>

          <TabsContent value="comment" className="px-6 py-4 min-h-[120px] flex flex-col gap-4">
            {/* Comment list */}
            <ScrollArea className="max-h-[260px]">
            <div className="flex flex-col gap-4">
              {(!comments || comments.length === 0) ? (
                <p className="text-sm text-muted-foreground italic">No comments yet.</p>
              ) : (
                comments.map((c) => (
                  <div key={c.id} className="flex gap-3">
                    <AuthorAvatar name={c.author} />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-sm font-medium">{c.author}</span>
                        <span className="text-xs text-muted-foreground">{relativeTime(c.createdAt)}</span>
                      </div>
                      <div className="rounded-lg bg-muted px-3 py-2 text-sm">
                        {c.content}
                      </div>
                      <div className="flex items-center gap-3 mt-1">
                        <button
                          type="button"
                          className="text-xs text-muted-foreground hover:text-destructive"
                          onClick={() => deleteComment.mutate({ id: c.id })}
                        >
                          Delete
                        </button>
                      </div>
                    </div>
                  </div>
                ))
              )}
            </div>
            </ScrollArea>

            {/* Add comment input */}
            <form
              className="flex items-center gap-2 mt-auto"
              onSubmit={(e) => { e.preventDefault(); handleAddComment(); }}
            >
              <AuthorAvatar name="Me" />
              <Input
                placeholder="Add a comment..."
                value={commentText}
                onChange={(e) => setCommentText(e.target.value)}
                className="flex-1"
              />
              <Button
                type="submit"
                size="icon"
                variant="ghost"
                disabled={!commentText.trim() || addComment.isPending}
              >
                <Send className="h-4 w-4" />
              </Button>
            </form>
          </TabsContent>
        </Tabs>

        <Separator />

        {/* Footer */}
        <DialogFooter className="px-6 py-4">
          <Button
            variant="destructive"
            size="sm"
            onClick={() => { onDelete(task.id); onOpenChange(false); }}
          >
            <Trash2 className="h-4 w-4 mr-1" />
            Delete
          </Button>
          <Button
            size="sm"
            onClick={() => { onEdit(task); onOpenChange(false); }}
          >
            <Pencil className="h-4 w-4 mr-1" />
            Edit
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}