'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Spinner } from '@/components/ui/spinners';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import {
  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
} from '@/components/ui/table';
import { RiSearchLine, RiBookmarkLine, RiFilterLine } from '@remixicon/react';
import { useCreatorFinderSearch, useSaveShortlist } from '../../hooks';
import { MatchScoreBadge, EmptyState, LoadingSkeleton } from '../shared/ScoreBar';
import type { CreatorFinderItem, CreatorFinderResult } from '../../types';
import { toast } from 'sonner';

const PLATFORMS = ['instagram', 'snapchat', 'tiktok', 'youtube', 'twitter'];
const TIERS = ['nano', 'micro', 'mid', 'macro', 'mega'];
const COUNTRIES = [
  { code: 'SA', name: 'Saudi Arabia' }, { code: 'AE', name: 'UAE' },
  { code: 'KW', name: 'Kuwait' }, { code: 'EG', name: 'Egypt' },
  { code: 'JO', name: 'Jordan' }, { code: 'BH', name: 'Bahrain' },
];

export function CreatorFinderPage() {
  const [filters, setFilters] = useState<Record<string, unknown>>({});
  const [results, setResults] = useState<CreatorFinderResult | null>(null);
  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [showFilters, setShowFilters] = useState(true);

  const { mutateAsync: search, isPending } = useCreatorFinderSearch();
  const { mutateAsync: saveShortlist, isPending: isSaving } = useSaveShortlist();

  const handleSearch = async () => {
    const cleaned: Record<string, unknown> = {};
    Object.entries(filters).forEach(([k, v]) => {
      if (v !== '' && v !== undefined && v !== 'all') cleaned[k] = v;
    });
    const res = await search(cleaned);
    setResults(res);
    setSelected(new Set());
  };

  const toggleSelect = (id: number) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) { next.delete(id); } else { next.add(id); }
      return next;
    });
  };

  const handleSaveShortlist = async () => {
    if (!results || selected.size === 0) return;
    const creators = results.items
      .filter(item => selected.has(item.influencer.id))
      .map(item => ({
        influencer_id: item.influencer.id,
        match_score: item.match_score,
        why_fit_summary: item.why_fit_summary,
        strengths: item.strengths,
        risks: item.risks,
      }));
    await saveShortlist({ creators, search_filters: filters });
    toast.success('Shortlist saved successfully');
    setSelected(new Set());
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">AI Creator Finder</h1>
          <p className="text-sm text-muted-foreground mt-1">Search and discover creators with AI-enhanced scoring</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => setShowFilters(!showFilters)}>
            <RiFilterLine className="size-4 mr-1.5" />Filters
          </Button>
          {selected.size > 0 && (
            <Button size="sm" onClick={handleSaveShortlist} disabled={isSaving}>
              {isSaving ? <Spinner className="size-4 animate-spin mr-1.5" /> : <RiBookmarkLine className="size-4 mr-1.5" />}
              Save Shortlist ({selected.size})
            </Button>
          )}
        </div>
      </div>

      {showFilters && (
        <Card>
          <CardContent className="pt-5">
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
              <div>
                <Label className="text-xs font-medium text-muted-foreground mb-1.5 block">Platform</Label>
                <Select value={(filters.platform as string) || 'all'} onValueChange={v => setFilters({ ...filters, platform: v === 'all' ? undefined : v })}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="All" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Platforms</SelectItem>
                    {PLATFORMS.map(p => <SelectItem key={p} value={p} className="capitalize">{p}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs font-medium text-muted-foreground mb-1.5 block">Country</Label>
                <Select value={(filters.country as string) || 'all'} onValueChange={v => setFilters({ ...filters, country: v === 'all' ? undefined : v })}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="All" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Countries</SelectItem>
                    {COUNTRIES.map(c => <SelectItem key={c.code} value={c.code}>{c.name}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs font-medium text-muted-foreground mb-1.5 block">Niche</Label>
                <Input className="h-9" placeholder="e.g. fashion" value={(filters.niche as string) || ''} onChange={e => setFilters({ ...filters, niche: e.target.value || undefined })} />
              </div>
              <div>
                <Label className="text-xs font-medium text-muted-foreground mb-1.5 block">Tier</Label>
                <Select value={(filters.tier as string) || 'all'} onValueChange={v => setFilters({ ...filters, tier: v === 'all' ? undefined : v })}>
                  <SelectTrigger className="h-9"><SelectValue placeholder="All" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Tiers</SelectItem>
                    {TIERS.map(t => <SelectItem key={t} value={t} className="capitalize">{t}</SelectItem>)}
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="text-xs font-medium text-muted-foreground mb-1.5 block">Min Followers</Label>
                <Input className="h-9" type="number" placeholder="e.g. 50000" value={(filters.min_followers as string) || ''} onChange={e => setFilters({ ...filters, min_followers: e.target.value ? Number(e.target.value) : undefined })} />
              </div>
              <div className="flex items-end">
                <Button className="w-full h-9" onClick={handleSearch} disabled={isPending}>
                  {isPending ? <Spinner className="size-4 animate-spin" /> : <RiSearchLine className="size-4" />}
                  <span className="ml-1.5">Search</span>
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {isPending ? (
        <Card><CardContent className="py-8"><LoadingSkeleton rows={5} /></CardContent></Card>
      ) : results ? (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm">{results.pagination?.total ?? results.items.length} Creators Found</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="p-0 overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow className="bg-muted/50">
                  <TableHead className="w-10" />
                  <TableHead className="font-semibold">Creator</TableHead>
                  <TableHead className="font-semibold">Platform</TableHead>
                  <TableHead className="font-semibold text-right">Followers</TableHead>
                  <TableHead className="font-semibold text-right">Engagement</TableHead>
                  <TableHead className="font-semibold">Country</TableHead>
                  <TableHead className="font-semibold">Category</TableHead>
                  <TableHead className="font-semibold text-center">Match</TableHead>
                  <TableHead className="font-semibold">Why</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {results.items.map((item: CreatorFinderItem) => (
                  <TableRow key={item.influencer.id} className="cursor-pointer hover:bg-muted/40">
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={selected.has(item.influencer.id)}
                        onChange={() => toggleSelect(item.influencer.id)}
                        className="rounded border-gray-300"
                      />
                    </TableCell>
                    <TableCell className="font-medium">@{item.influencer.username}</TableCell>
                    <TableCell><Badge variant="info" appearance="outline" className="text-xs capitalize">{item.influencer.social_network}</Badge></TableCell>
                    <TableCell className="text-right tabular-nums">{item.influencer.subscribers?.toLocaleString()}</TableCell>
                    <TableCell className="text-right tabular-nums">{item.influencer.engagement_rate}%</TableCell>
                    <TableCell>{item.influencer.country_code}</TableCell>
                    <TableCell>{item.influencer.category}</TableCell>
                    <TableCell className="text-center"><MatchScoreBadge score={item.match_score} /></TableCell>
                    <TableCell className="max-w-[200px]">
                      <p className="text-xs text-muted-foreground truncate" title={item.why_fit_summary}>{item.why_fit_summary}</p>
                      {item.strengths.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {item.strengths.slice(0, 2).map((s, i) => (
                            <span key={i} className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700">{s}</span>
                          ))}
                        </div>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent>
            <EmptyState title="Search for Creators" description="Use the filters above to find creators that match your campaign needs." />
          </CardContent>
        </Card>
      )}
    </div>
  );
}