'use client';

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import { Eye, Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinners';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  fetchActivities,
  fetchKnownEvents,
} from '@/network/apis/dashboard/marketing-analytics/marketing-analytics.apis';
import { JourneyRole } from '@/network/apis/dashboard/marketing-analytics/type';
import { eventLabel, ROLE_LABELS, roleBadgeClass } from '../labels';
import { UserJourneySheet } from './UserJourneySheet';

/** Select cannot hold an empty string as a value, so "any" is a real token. */
const ANY = '__any__';

export function ActivityExplorer({ from, to }: { from: string; to: string }) {
  const [role, setRole] = useState<string>(ANY);
  const [event, setEvent] = useState<string>(ANY);
  const [search, setSearch] = useState('');
  // Applied separately from `search` so the list is not refetched on every
  // keystroke; the input drives this only on Enter or on the button.
  const [appliedSearch, setAppliedSearch] = useState('');
  const [page, setPage] = useState(1);
  const [openUserId, setOpenUserId] = useState<number | null>(null);

  const events = useQuery({
    queryKey: ['analytics', 'events'],
    queryFn: fetchKnownEvents,
  });

  const filters = {
    role: role === ANY ? undefined : (role as JourneyRole),
    event: event === ANY ? undefined : event,
    search: appliedSearch || undefined,
    from,
    to,
    page,
    per_page: 30,
  };

  const { data, isLoading } = useQuery({
    queryKey: ['analytics', 'activities', filters],
    queryFn: () => fetchActivities(filters),
  });

  const applySearch = () => {
    setAppliedSearch(search.trim());
    setPage(1);
  };

  /** Any filter change invalidates the page number you were on. */
  const onFilter = (setter: (v: string) => void) => (value: string) => {
    setter(value);
    setPage(1);
  };

  const rows = data?.activities ?? [];
  const pagination = data?.pagination;

  return (
    <>
      <Card>
        <CardHeader className="pb-3">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
            <CardTitle className="text-base font-semibold">Activity</CardTitle>
            <div className="flex items-center gap-2 flex-wrap">
              <div className="relative">
                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Name or email..."
                  className="pl-8 h-9 w-[200px]"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  onKeyDown={(e) => e.key === 'Enter' && applySearch()}
                  onBlur={applySearch}
                />
              </div>
              <Select value={role} onValueChange={onFilter(setRole)}>
                <SelectTrigger className="h-9 w-[130px]">
                  <SelectValue placeholder="Role" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ANY}>All roles</SelectItem>
                  <SelectItem value="creator">Creators</SelectItem>
                  <SelectItem value="brand">Brands</SelectItem>
                  <SelectItem value="admin">Admins</SelectItem>
                </SelectContent>
              </Select>
              <Select value={event} onValueChange={onFilter(setEvent)}>
                <SelectTrigger className="h-9 w-[190px]">
                  <SelectValue placeholder="Event" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ANY}>All events</SelectItem>
                  {(events.data ?? []).map((e) => (
                    <SelectItem key={e.event} value={e.event}>
                      {eventLabel(e.event)} ({e.total})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardHeader>
        <CardContent className="pt-0">
          {isLoading ? (
            <div className="flex justify-center py-10">
              <Spinner className="h-6 w-6" />
            </div>
          ) : rows.length === 0 ? (
            <p className="text-sm text-muted-foreground py-10 text-center">
              No activity matches these filters.
            </p>
          ) : (
            <>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Person</TableHead>
                    <TableHead>Role</TableHead>
                    <TableHead>Did what</TableHead>
                    <TableHead>Detail</TableHead>
                    <TableHead>When</TableHead>
                    <TableHead className="w-[50px]"></TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {rows.map((a) => (
                    <TableRow key={a.id}>
                      <TableCell>
                        <p className="text-sm font-medium">
                          {a.user?.name ?? '—'}
                        </p>
                        <p className="text-xs text-muted-foreground">
                          {a.user?.email ?? ''}
                        </p>
                      </TableCell>
                      <TableCell>
                        <span
                          className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border ${roleBadgeClass(a.role)}`}
                        >
                          {ROLE_LABELS[a.role]}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm">{eventLabel(a.event)}</span>
                        {a.actor && (
                          <p className="text-xs text-muted-foreground">
                            by {a.actor.name}
                          </p>
                        )}
                      </TableCell>
                      <TableCell className="max-w-[240px]">
                        <span className="text-xs text-muted-foreground break-words">
                          {a.properties
                            ? Object.entries(a.properties)
                                .filter(([, v]) => v !== null && v !== '')
                                .slice(0, 3)
                                .map(([k, v]) => `${k.replace(/_/g, ' ')}: ${v}`)
                                .join(' · ')
                            : '—'}
                        </span>
                      </TableCell>
                      <TableCell>
                        <span className="text-sm whitespace-nowrap">
                          {a.occurred_at
                            ? format(new Date(a.occurred_at), 'd MMM, HH:mm')
                            : '—'}
                        </span>
                      </TableCell>
                      <TableCell>
                        <Button
                          variant="ghost"
                          size="sm"
                          mode="icon"
                          className="h-7 w-7"
                          disabled={!a.user}
                          onClick={() => a.user && setOpenUserId(a.user.id)}
                          title="View this person's full journey"
                        >
                          <Eye className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>

              {pagination && pagination.last_page > 1 && (
                <div className="flex items-center justify-between pt-4">
                  <p className="text-xs text-muted-foreground">
                    Page {pagination.current_page} of {pagination.last_page} ·{' '}
                    {pagination.total.toLocaleString()} events
                  </p>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      disabled={page <= 1}
                      onClick={() => setPage((p) => Math.max(1, p - 1))}
                    >
                      Previous
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      disabled={page >= pagination.last_page}
                      onClick={() => setPage((p) => p + 1)}
                    >
                      Next
                    </Button>
                  </div>
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>

      <UserJourneySheet
        userId={openUserId}
        onClose={() => setOpenUserId(null)}
      />
    </>
  );
}