'use client';

import Image from 'next/image';
import { useCallback, useEffect, useState } from 'react';
import {
  Search,
  MessageSquare,
  Bug,
  Lightbulb,
  ThumbsUp,
  Eye,
  Trash2,
  ImageIcon,
  Loader2,
  Download,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useToast } from '@/components/ui/toast';

interface Feedback {
  id: string;
  type: 'bug' | 'feature' | 'praise' | 'other';
  title: string;
  body?: string;
  status: 'new' | 'reviewed' | 'resolved' | 'closed';
  userId: string;
  userEmail?: string;
  createdAt: string;
  screenshotBlobPath?: string;
  screenshotContentType?: string;
  deviceContext?: {
    osVersion?: string;
    appVersion?: string;
    deviceModel?: string;
    screenResolution?: string;
    locale?: string;
  };
}

const typeIcons = {
  bug: Bug,
  feature: Lightbulb,
  praise: ThumbsUp,
  other: MessageSquare,
};

const typeColors = {
  bug: 'bg-red-100 text-red-800',
  feature: 'bg-blue-100 text-blue-800',
  praise: 'bg-green-100 text-green-800',
  other: 'bg-gray-100 text-gray-800',
};

const statusColors = {
  new: 'bg-yellow-100 text-yellow-800',
  reviewed: 'bg-blue-100 text-blue-800',
  resolved: 'bg-green-100 text-green-800',
  closed: 'bg-gray-100 text-gray-800',
};

export default function FeedbackPage() {
  const [feedback, setFeedback] = useState<Feedback[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [typeFilter, setTypeFilter] = useState<string>('all');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [screenshotFilter, setScreenshotFilter] = useState<string>('all');
  const [selectedFeedback, setSelectedFeedback] = useState<Feedback | null>(null);
  const [screenshotUrl, setScreenshotUrl] = useState<string | null>(null);
  const [lightboxOpen, setLightboxOpen] = useState(false);
  const { toast } = useToast();

  const fetchFeedback = useCallback(async () => {
    try {
      const res = await fetch('/api/feedback');
      if (!res.ok) throw new Error('Failed to fetch');
      const data = await res.json();
      setFeedback(data.items || []);
    } catch {
      toast({ title: 'Error', description: 'Failed to load feedback', variant: 'error' });
    } finally {
      setLoading(false);
    }
  }, [toast]);

  useEffect(() => {
    fetchFeedback();
  }, [fetchFeedback]);

  async function viewScreenshot(feedbackId: string) {
    try {
      const res = await fetch(`/api/feedback/${feedbackId}/screenshot`);
      if (!res.ok) throw new Error('Failed to fetch screenshot');
      const data = await res.json();
      setScreenshotUrl(data.url);
      setLightboxOpen(true);
    } catch {
      toast({ title: 'Error', description: 'Failed to load screenshot', variant: 'error' });
    }
  }

  async function deleteScreenshot(feedbackId: string) {
    if (!confirm('Delete this screenshot?')) return;
    try {
      const res = await fetch(`/api/feedback/${feedbackId}/screenshot`, { method: 'DELETE' });
      if (!res.ok) throw new Error('Failed to delete');
      toast({ title: 'Success', description: 'Screenshot deleted' });
      fetchFeedback();
    } catch {
      toast({ title: 'Error', description: 'Failed to delete screenshot', variant: 'error' });
    }
  }

  async function downloadScreenshot(feedbackId: string, contentType?: string) {
    try {
      const res = await fetch(`/api/feedback/${feedbackId}/screenshot`);
      if (!res.ok) throw new Error('Failed to fetch screenshot');
      const data = await res.json();

      // Create temporary link to download
      const link = document.createElement('a');
      link.href = data.url;
      link.download = `screenshot-${feedbackId}.${contentType?.split('/')[1] || 'png'}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } catch {
      toast({ title: 'Error', description: 'Failed to download screenshot', variant: 'error' });
    }
  }

  const filteredFeedback = feedback.filter(f => {
    const matchesSearch =
      f.title.toLowerCase().includes(search.toLowerCase()) ||
      f.body?.toLowerCase().includes(search.toLowerCase());
    const matchesType = typeFilter === 'all' || f.type === typeFilter;
    const matchesStatus = statusFilter === 'all' || f.status === statusFilter;
    const matchesScreenshot =
      screenshotFilter === 'all' ||
      (screenshotFilter === 'has' && f.screenshotBlobPath) ||
      (screenshotFilter === 'none' && !f.screenshotBlobPath);
    return matchesSearch && matchesType && matchesStatus && matchesScreenshot;
  });

  return (
    <div className="container mx-auto py-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold">User Feedback</h1>
          <p className="text-muted-foreground">
            View and manage user-submitted feedback with screenshots
          </p>
        </div>
      </div>

      <Card className="mb-6">
        <CardContent className="pt-6">
          <div className="flex flex-wrap gap-4">
            <div className="flex-1 min-w-[200px] relative">
              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground pointer-events-none" />
              <Input
                placeholder="Search feedback..."
                value={search}
                onChange={e => setSearch(e.target.value)}
                className="pl-9"
              />
            </div>
            <Select value={typeFilter} onValueChange={setTypeFilter}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="Type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Types</SelectItem>
                <SelectItem value="bug">Bug</SelectItem>
                <SelectItem value="feature">Feature</SelectItem>
                <SelectItem value="praise">Praise</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </SelectContent>
            </Select>
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="new">New</SelectItem>
                <SelectItem value="reviewed">Reviewed</SelectItem>
                <SelectItem value="resolved">Resolved</SelectItem>
                <SelectItem value="closed">Closed</SelectItem>
              </SelectContent>
            </Select>
            <Select value={screenshotFilter} onValueChange={setScreenshotFilter}>
              <SelectTrigger className="w-[160px]">
                <SelectValue placeholder="Screenshot" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                <SelectItem value="has">Has Screenshot</SelectItem>
                <SelectItem value="none">No Screenshot</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Feedback ({filteredFeedback.length})</CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-8 w-8 animate-spin" />
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Type</TableHead>
                  <TableHead>Title</TableHead>
                  <TableHead>User</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Screenshot</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredFeedback.map(f => {
                  const TypeIcon = typeIcons[f.type];
                  return (
                    <TableRow key={f.id}>
                      <TableCell>
                        <Badge className={typeColors[f.type]}>
                          <TypeIcon className="h-3 w-3 mr-1" />
                          {f.type}
                        </Badge>
                      </TableCell>
                      <TableCell className="font-medium max-w-[300px] truncate">
                        {f.title}
                      </TableCell>
                      <TableCell>{f.userEmail || f.userId.slice(0, 8)}</TableCell>
                      <TableCell>
                        <Badge className={statusColors[f.status]}>{f.status}</Badge>
                      </TableCell>
                      <TableCell>
                        {f.screenshotBlobPath ? (
                          <Badge variant="outline" className="bg-green-50">
                            <ImageIcon className="h-3 w-3 mr-1" />
                            Yes
                          </Badge>
                        ) : (
                          <span className="text-muted-foreground">-</span>
                        )}
                      </TableCell>
                      <TableCell>{new Date(f.createdAt).toLocaleDateString()}</TableCell>
                      <TableCell>
                        <div className="flex gap-2">
                          <Button variant="ghost" size="sm" onClick={() => setSelectedFeedback(f)}>
                            <Eye className="h-4 w-4" />
                          </Button>
                          {f.screenshotBlobPath && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => deleteScreenshot(f.id)}
                            >
                              <Trash2 className="h-4 w-4 text-red-500" />
                            </Button>
                          )}
                        </div>
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {/* Feedback Detail Dialog */}
      <Dialog open={!!selectedFeedback} onOpenChange={() => setSelectedFeedback(null)}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Feedback Details</DialogTitle>
          </DialogHeader>
          {selectedFeedback && (
            <div className="space-y-4">
              <div className="flex items-center gap-2">
                <Badge className={typeColors[selectedFeedback.type]}>{selectedFeedback.type}</Badge>
                <Badge className={statusColors[selectedFeedback.status]}>
                  {selectedFeedback.status}
                </Badge>
              </div>
              <h3 className="text-lg font-semibold">{selectedFeedback.title}</h3>
              <p className="text-muted-foreground">{selectedFeedback.body}</p>

              {/* Screenshot Section */}
              {selectedFeedback.screenshotBlobPath && (
                <div className="border rounded-lg p-4">
                  <h4 className="font-medium mb-2">Screenshot</h4>
                  <div className="flex gap-2">
                    <Button variant="outline" onClick={() => viewScreenshot(selectedFeedback.id)}>
                      <Eye className="h-4 w-4 mr-2" />
                      View
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() =>
                        downloadScreenshot(
                          selectedFeedback.id,
                          selectedFeedback.screenshotContentType
                        )
                      }
                    >
                      <Download className="h-4 w-4 mr-2" />
                      Download
                    </Button>
                    <Button variant="outline" onClick={() => deleteScreenshot(selectedFeedback.id)}>
                      <Trash2 className="h-4 w-4 mr-2 text-red-500" />
                      Delete
                    </Button>
                  </div>
                </div>
              )}

              {/* Device Context */}
              {selectedFeedback.deviceContext && (
                <div className="border rounded-lg p-4">
                  <h4 className="font-medium mb-2">Device Context</h4>
                  <div className="grid grid-cols-2 gap-2 text-sm">
                    {selectedFeedback.deviceContext.osVersion && (
                      <div>
                        <span className="text-muted-foreground">OS:</span>{' '}
                        {selectedFeedback.deviceContext.osVersion}
                      </div>
                    )}
                    {selectedFeedback.deviceContext.appVersion && (
                      <div>
                        <span className="text-muted-foreground">App:</span>{' '}
                        {selectedFeedback.deviceContext.appVersion}
                      </div>
                    )}
                    {selectedFeedback.deviceContext.deviceModel && (
                      <div>
                        <span className="text-muted-foreground">Device:</span>{' '}
                        {selectedFeedback.deviceContext.deviceModel}
                      </div>
                    )}
                    {selectedFeedback.deviceContext.screenResolution && (
                      <div>
                        <span className="text-muted-foreground">Resolution:</span>{' '}
                        {selectedFeedback.deviceContext.screenResolution}
                      </div>
                    )}
                    {selectedFeedback.deviceContext.locale && (
                      <div>
                        <span className="text-muted-foreground">Locale:</span>{' '}
                        {selectedFeedback.deviceContext.locale}
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* Screenshot Lightbox */}
      <Dialog open={lightboxOpen} onOpenChange={setLightboxOpen}>
        <DialogContent className="max-w-4xl p-0 overflow-hidden">
          {screenshotUrl && (
            <div className="relative h-[80vh] w-full">
              <Image
                src={screenshotUrl}
                alt="Screenshot"
                fill
                sizes="100vw"
                unoptimized
                className="object-contain"
              />
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}
