'use client';

import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { InfluencerNumber, Pagination } from '../../hooks/useInfluencerNumbers';
import PaginationComponent from '@/modules/users/components/paginationComponent/paginationComponent';


interface InfluencerNumbersTableProps {
  data: InfluencerNumber[];
  pagination?: Pagination;
  currentPage: number;
  onPageChange: (page: number) => void;
  isLoading?: boolean;
}

const tableHead = [
  { column: 'Influencer' },
  { column: 'Platform' },
  { column: 'Phone Number' },
  { column: 'Country Code' },
  { column: 'Source' },
  { column: 'Last Message' },
  { column: 'Created At' },
  { column: 'Created By' },
  // { column: 'Actions' },
];

const getPlatformColor = (platform: string) => {
  const colors: Record<string, string> = {
    instagram: 'bg-pink-500',
    tiktok: 'bg-black',
    youtube: 'bg-red-500',
    snapchat: 'bg-yellow-400',
    twitch: 'bg-purple-500',
    twitter: 'bg-blue-400',
  };
  return colors[platform.toLowerCase()] || 'bg-gray-500';
};

export default function InfluencerNumbersTable({
  data,
  pagination,
  currentPage,
  onPageChange,
  isLoading,
}: InfluencerNumbersTableProps) {
  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const truncateMessage = (message: string | null, maxLength: number = 50) => {
    if (!message) return '-';
    return message.length > maxLength
      ? `${message.substring(0, maxLength)}...`
      : message;
  };

  const totalPages = pagination?.last_page ?? 1;

  return (
    <Card>
      <CardHeader className="flex-row items-center justify-between">
        <CardTitle>Influencer Numbers ({pagination?.total ?? 0})</CardTitle>
        {/* <CreateInfluencerNumberModal /> */}
      </CardHeader>
      <CardContent className="kt-scrollable-x-auto p-0">
        <Table>
          <TableHeader>
            <TableRow className="bg-accent/60">
              {tableHead.map((h) => (
                <TableHead key={h.column} className="min-w-32 h-10">
                  {h.column}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>

          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell
                  colSpan={tableHead.length}
                  className="text-center py-8 text-muted-foreground"
                >
                  Loading...
                </TableCell>
              </TableRow>
            ) : data.length > 0 ? (
              data.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Avatar className="size-8">
                        <AvatarImage src={item?.influencer?.avatar_url} alt={item?.influencer?.username} />
                        <AvatarFallback>
                          {item?.influencer?.username?.slice(0, 2).toUpperCase()}
                        </AvatarFallback>
                      </Avatar>
                      <span className="font-medium">{item?.influencer?.username}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge className={`${getPlatformColor(item.platform)} text-white`}>
                      {item.platform}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono">{item.phone_number}</TableCell>
                  <TableCell>{item.country_code}</TableCell>
                  <TableCell>
                    <Badge variant="secondary">{item.source_app}</Badge>
                  </TableCell>
                  <TableCell className="max-w-xs">
                    <span className="text-sm" title={item.message?.last_message || undefined}>
                      {truncateMessage(item.message?.last_message)}
                    </span>
                  </TableCell>
                  <TableCell>{formatDate(item.created_at)}</TableCell>
                  <TableCell>{item?.created_by?.user_name}</TableCell>
{/*
                  <TableCell>
                    <div className="flex items-center gap-1">
                      <UpdateInfluencerNumberModal item={item} />
                      <DeleteInfluencerNumberDialog item={item} />
                    </div>
                  </TableCell> */}


                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={tableHead.length}
                  className="text-center py-8 text-muted-foreground"
                >
                  No influencer numbers found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>

      {pagination && totalPages > 1 && (
        <CardFooter className="justify-center">
          <PaginationComponent
            currentPage={currentPage}
            totalPages={totalPages}
            onPageChange={onPageChange}
          />
        </CardFooter>
      )}
    </Card>
  );
}