'use client';

import { useEffect, useState } from 'react';
import { Plus, Trash2, Save, GripVertical, Eye, EyeOff } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { Package, LocalizedString } from '@/types';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import ImageUploader from '@/components/ui/ImageUploader';
import { PageSpinner } from '@/components/ui/Spinner';

const emptyLS = (): LocalizedString => ({ en: '', zh: '' });

export default function PackagesPage() {
  const [items, setItems] = useState<Package[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [savingId, setSavingId] = useState<string | null>(null);

  useEffect(() => {
    loadItems();
  }, []);

  const loadItems = async () => {
    try {
      const data = await api.getPackages();
      setItems(data);
    } catch {
      toast.error('Failed to load packages');
    } finally {
      setIsLoading(false);
    }
  };

  const sorted = [...items].sort((a, b) => a.order - b.order);

  const addItem = async () => {
    try {
      const newItem: Omit<Package, '_id'> = {
        title: emptyLS(),
        image: '',
        link: '',
        order: items.length + 1,
        isActive: true,
      };
      const created = await api.createPackage(newItem);
      setItems((prev) => [...prev, created]);
      toast.success('Package added');
    } catch {
      toast.error('Failed to add package');
    }
  };

  const saveItem = async (item: Package) => {
    if (!item._id) return;
    setSavingId(item._id);
    try {
      const { _id, createdAt, updatedAt, ...data } = item;
      await api.updatePackage(_id, data);
      toast.success('Saved');
    } catch {
      toast.error('Failed to save');
    } finally {
      setSavingId(null);
    }
  };

  const deleteItem = async (id: string) => {
    if (!confirm('Delete this package?')) return;
    try {
      await api.deletePackage(id);
      setItems((prev) => prev.filter((i) => i._id !== id));
      toast.success('Deleted');
    } catch {
      toast.error('Failed to delete');
    }
  };

  const updateField = <K extends keyof Package>(
    id: string,
    field: K,
    value: Package[K]
  ) => {
    setItems((prev) =>
      prev.map((i) => (i._id === id ? { ...i, [field]: value } : i))
    );
  };

  const updateTitle = (id: string, lang: 'en' | 'zh', value: string) => {
    setItems((prev) =>
      prev.map((i) =>
        i._id === id ? { ...i, title: { ...i.title, [lang]: value } } : i
      )
    );
  };

  if (isLoading) return <PageSpinner />;

  return (
    <div className="max-w-5xl mx-auto space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Packages</h1>
          <p className="text-sm text-gray-500 mt-1">
            Manage package cards displayed on the homepage left sidebar.
            Items show 3 at a time and auto-scroll when there are more.
          </p>
        </div>
      </div>

      <div className="flex items-center justify-between">
        <p className="text-sm text-gray-500">{items.length} package{items.length !== 1 ? 's' : ''} total</p>
        <Button onClick={addItem} className="gap-1.5">
          <Plus size={16} />
          Add Package
        </Button>
      </div>

      {sorted.length === 0 ? (
        <div className="bg-white rounded-lg border border-gray-200 p-12 text-center">
          <p className="text-gray-500">
            No packages yet. Add one to get started.
          </p>
        </div>
      ) : (
        <div className="space-y-4">
          {sorted.map((item) => (
            <div
              key={item._id}
              className="bg-white rounded-lg border border-gray-200 p-5 space-y-4"
            >
              <div className="flex items-start justify-between gap-4">
                <div className="flex items-center gap-2">
                  <GripVertical size={16} className="text-gray-400" />
                  <span className="text-xs font-medium uppercase tracking-wider text-gray-400">
                    #{item.order}
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <button
                    onClick={() => updateField(item._id!, 'isActive', !item.isActive)}
                    className={`p-1.5 rounded transition-colors ${
                      item.isActive
                        ? 'text-green-600 hover:bg-green-50'
                        : 'text-gray-400 hover:bg-gray-50'
                    }`}
                    title={item.isActive ? 'Active' : 'Inactive'}
                  >
                    {item.isActive ? <Eye size={16} /> : <EyeOff size={16} />}
                  </button>
                  <button
                    onClick={() => saveItem(item)}
                    disabled={savingId === item._id}
                    className="p-1.5 rounded text-blue-600 hover:bg-blue-50 transition-colors disabled:opacity-50"
                    title="Save"
                  >
                    <Save size={16} />
                  </button>
                  <button
                    onClick={() => deleteItem(item._id!)}
                    className="p-1.5 rounded text-red-500 hover:bg-red-50 transition-colors"
                    title="Delete"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Input
                  label="Title (EN)"
                  value={item.title?.en || ''}
                  onChange={(e) => updateTitle(item._id!, 'en', e.target.value)}
                  placeholder="English title"
                />
                <Input
                  label="Title (ZH)"
                  value={item.title?.zh || ''}
                  onChange={(e) => updateTitle(item._id!, 'zh', e.target.value)}
                  placeholder="中文標題"
                />
                <Input
                  label="Redirect URL"
                  value={item.link || ''}
                  onChange={(e) => updateField(item._id!, 'link', e.target.value)}
                  placeholder="https://www.example.com"
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Input
                  label="Order"
                  type="number"
                  value={item.order}
                  onChange={(e) => updateField(item._id!, 'order', parseInt(e.target.value) || 0)}
                  className="max-w-[100px]"
                />
              </div>

              <ImageUploader
                label="Image"
                value={item.image}
                onChange={(url) => updateField(item._id!, 'image', url)}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}