'use client'

import { useState } from 'react'
import {
  Button,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import { FiPlus, FiTrash } from 'react-icons/fi'

import tableTheme from '@/lib/themes/table'
import buttonTheme from '@/lib/themes/button'
import { ReferralLink } from '@/app/(dashboard)/referral-links/types'
import ReferralLinkSearchModal from './ReferralLinkSearchModal'

interface ReferralLinksSectionProps {
  referralLinks: ReferralLink[]
  onChange: (referralLinks: ReferralLink[]) => void
}

export default function ReferralLinksSection({
  referralLinks,
  onChange,
}: ReferralLinksSectionProps) {
  const [isModalOpen, setIsModalOpen] = useState(false)

  function handleAddLinks(newLinks: ReferralLink[]) {
    const merged = [
      ...referralLinks,
      ...newLinks.filter(
        (link) => !referralLinks.some((existing) => existing.id === link.id),
      ),
    ]
    onChange(merged)
  }

  function handleDeleteLink(linkId: number) {
    onChange(referralLinks.filter((link) => link.id !== linkId))
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="text-xl font-semibold text-gray-900">Referral Links</h3>
        <Button
          type="button"
          size="sm"
          color="blue"
          theme={buttonTheme.button}
          onClick={() => setIsModalOpen(true)}
        >
          <FiPlus className="mr-2 h-4 w-4" />
          Add Link
        </Button>
      </div>

      {referralLinks.length > 0 ? (
        <div className="overflow-x-auto">
          <Table theme={tableTheme.table} hoverable>
            <TableHead>
              <TableRow>
                <TableHeadCell className="text-nowrap p-4">
                  Link Name
                </TableHeadCell>
                <TableHeadCell className="text-nowrap p-4">
                  Merchant
                </TableHeadCell>
                <TableHeadCell className="text-nowrap p-4 w-20">
                  Action
                </TableHeadCell>
              </TableRow>
            </TableHead>

            <TableBody>
              {referralLinks.map((link) => (
                <TableRow key={link.id} className="bg-white">
                  <TableCell className="text-nowrap p-4 text-black font-medium">
                    {link.link_name}
                  </TableCell>
                  <TableCell className="text-nowrap p-4">
                    {link.user?.name || 'N/A'}
                  </TableCell>
                  <TableCell className="p-4">
                    <Button
                      type="button"
                      size="xs"
                      color="red"
                      theme={buttonTheme.button}
                      onClick={() => handleDeleteLink(link.id)}
                    >
                      <FiTrash className="mr-1 h-3 w-3" />
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ) : (
        <div className="text-center py-8 border border-dashed border-gray-300 rounded-lg">
          <p className="text-gray-500 text-sm">
            No referral links assigned. Click &quot;Add Link&quot; to add
            referral links.
          </p>
        </div>
      )}

      <ReferralLinkSearchModal
        isOpen={isModalOpen}
        excludeIds={referralLinks.map((link) => link.id)}
        onClose={() => setIsModalOpen(false)}
        onSelect={handleAddLinks}
      />
    </div>
  )
}