import { useState } from 'react'
import { Puzzle, Trash2 } from 'lucide-react'
import { useInstalledAddons, useRemoveAddon } from '../../hooks/useAddons'
import { AddonBrowserModal } from '../addons/AddonBrowserModal'

export function AddonsSection({ name }: { name: string }): React.JSX.Element {
  const { data: installed, isLoading } = useInstalledAddons(name)
  const removeAddon = useRemoveAddon(name)
  const [isBrowserOpen, setIsBrowserOpen] = useState(false)

  return (
    <section className="rounded-xl border border-white/70 bg-white/[0.78] p-4 shadow-sm backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/[0.55]">
      <div className="mb-3 flex items-center justify-between gap-3">
        <h3 className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
          Add-ons
        </h3>
        <button
          type="button"
          onClick={() => setIsBrowserOpen(true)}
          className="inline-flex items-center gap-1.5 rounded-md border border-neutral-300 bg-white/70 px-2.5 py-1 text-xs font-medium transition hover:bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05] dark:hover:bg-white/10"
        >
          <Puzzle size={12} /> Browse Add-ons
        </button>
      </div>

      {isLoading ? (
        <p className="rounded-lg border border-dashed border-neutral-300 bg-neutral-50/70 px-3 py-4 text-sm text-neutral-500 dark:border-white/10 dark:bg-white/[0.03] dark:text-neutral-400">
          Loading add-ons…
        </p>
      ) : !installed || installed.length === 0 ? (
        <p className="rounded-lg border border-dashed border-neutral-300 bg-neutral-50/70 px-3 py-4 text-sm text-neutral-500 dark:border-white/10 dark:bg-white/[0.03] dark:text-neutral-400">
          No add-ons installed.
        </p>
      ) : (
        <div className="overflow-hidden rounded-lg border border-neutral-200/80 bg-white dark:border-white/10 dark:bg-neutral-950/70">
          <table className="w-full text-sm">
            <thead className="bg-neutral-50 text-left text-xs uppercase text-neutral-500 dark:bg-white/[0.04] dark:text-neutral-400">
              <tr>
                <th className="px-3 py-2 font-medium">Name</th>
                <th className="px-3 py-2 font-medium">Version</th>
                <th className="px-3 py-2 font-medium">Repository</th>
                <th className="px-3 py-2 font-medium" />
              </tr>
            </thead>
            <tbody>
              {installed.map((addon) => (
                <tr
                  key={addon.Name}
                  className="border-t border-neutral-200/80 transition hover:bg-cyan-50/40 dark:border-white/10 dark:hover:bg-cyan-400/5"
                >
                  <td className="px-3 py-2 font-medium">{addon.Name}</td>
                  <td className="px-3 py-2 text-neutral-500 dark:text-neutral-400">
                    {addon.Version}
                  </td>
                  <td className="px-3 py-2 text-neutral-500 dark:text-neutral-400">
                    {addon.Repository}
                  </td>
                  <td className="px-3 py-2">
                    <div className="flex justify-end">
                      <button
                        type="button"
                        disabled={removeAddon.isPending}
                        onClick={() => {
                          if (window.confirm(`Remove add-on "${addon.Name}"?`)) {
                            removeAddon.mutate(addon.Name)
                          }
                        }}
                        title="Remove"
                        className="rounded p-1 text-red-500 transition hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-40 dark:hover:bg-red-400/10"
                      >
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {isBrowserOpen && <AddonBrowserModal name={name} onClose={() => setIsBrowserOpen(false)} />}
    </section>
  )
}
