import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, ArrowRight, Trash2 } from 'lucide-react';
import { inboxApi } from '../lib/api';
import { Button } from '../components/ui/Button';
import { Input } from '../components/ui/Input';
import { Card, CardContent } from '../components/ui/Card';
import { ProcessModal } from '../components/inbox/ProcessModal';
import type { InboxItemResponseDto } from '@nick-tracker/shared-types';

export function InboxPage() {
  const queryClient = useQueryClient();
  const [newItem, setNewItem] = useState('');
  const [selectedItem, setSelectedItem] = useState<InboxItemResponseDto | null>(null);

  const { data: items = [], isLoading } = useQuery({
    queryKey: ['inbox'],
    queryFn: async () => {
      const response = await inboxApi.getAll();
      return response.data as InboxItemResponseDto[];
    },
  });

  const createMutation = useMutation({
    mutationFn: (content: string) => inboxApi.create(content),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['inbox'] });
      setNewItem('');
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => inboxApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['inbox'] });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (newItem.trim()) {
      createMutation.mutate(newItem.trim());
    }
  };

  const handleProcess = (item: InboxItemResponseDto) => {
    setSelectedItem(item);
  };

  const handleCloseModal = () => {
    setSelectedItem(null);
    queryClient.invalidateQueries({ queryKey: ['inbox'] });
  };

  return (
    <div className="p-8">
      <div className="max-w-3xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold mb-2">Inbox</h1>
          <p className="text-muted-foreground">
            Capture everything on your mind. Process items to clarify what they mean.
          </p>
        </div>

        <form onSubmit={handleSubmit} className="mb-8 flex gap-2">
          <Input
            value={newItem}
            onChange={(e) => setNewItem(e.target.value)}
            placeholder="What's on your mind?"
            className="flex-1"
          />
          <Button type="submit" disabled={createMutation.isPending || !newItem.trim()}>
            <Plus className="h-4 w-4 mr-2" />
            Add
          </Button>
        </form>

        {isLoading ? (
          <div className="text-center text-muted-foreground py-8">Loading...</div>
        ) : items.length === 0 ? (
          <Card>
            <CardContent className="py-12 text-center">
              <p className="text-muted-foreground">
                Your inbox is empty. Add items above to capture thoughts and tasks.
              </p>
            </CardContent>
          </Card>
        ) : (
          <div className="space-y-3">
            {items.map((item) => (
              <Card key={item.id}>
                <CardContent className="py-4 flex items-center justify-between">
                  <div className="flex-1">
                    <p className="font-medium">{item.content}</p>
                    <p className="text-sm text-muted-foreground">
                      {new Date(item.createdAt).toLocaleDateString()}
                    </p>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleProcess(item)}
                    >
                      <ArrowRight className="h-4 w-4 mr-2" />
                      Process
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => deleteMutation.mutate(item.id)}
                    >
                      <Trash2 className="h-4 w-4 text-destructive" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        )}
      </div>

      {selectedItem && (
        <ProcessModal item={selectedItem} onClose={handleCloseModal} />
      )}
    </div>
  );
}