import React from 'react';
import type { Kandang } from '../../types/api.ts';

type FeedInButtonGridProps = {
  kandangs: Kandang[];
  variant?: 'default' | 'kiosk';
};

type ButtonItem = {
  key: string;
  kandangName: string;
  label: string;
  url: string;
};

const toButtonItems = (kandangs: Kandang[]): ButtonItem[] =>
  kandangs.flatMap((kandang) =>
    (kandang.feed_in_button_urls ?? [])
      .filter((entry) => entry.url.trim())
      .map((entry, index) => ({
        key: `${kandang.id}-${index}`,
        kandangName: kandang.kandang_name,
        label: entry.label.trim(),
        url: entry.url.trim(),
      }))
  );

const FeedInButtonGrid: React.FC<FeedInButtonGridProps> = ({ kandangs, variant = 'default' }) => {
  const buttons = toButtonItems(kandangs);
  const isKiosk = variant === 'kiosk';

  if (buttons.length === 0) {
    return (
      <div
        className={`rounded-xl border border-dashed border-gray-300 bg-white text-center ${
          isKiosk ? 'p-10' : 'p-8'
        }`}
      >
        <i className="fa-solid fa-link-slash text-3xl text-gray-300 mb-3" />
        <p className="text-gray-600 font-medium">Belum ada URL Feed In yang dikonfigurasi.</p>
        <p className="text-sm text-gray-500 mt-1">Atur alamat per kandang di menu Pengaturan.</p>
      </div>
    );
  }

  return (
    <div
      className={`grid gap-4 ${
        isKiosk
          ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl mx-auto'
          : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
      }`}
    >
      {buttons.map((button) => {
        const title = button.label || button.kandangName;
        const subtitle = button.label ? button.kandangName : button.url;

        return (
          <a
            key={button.key}
            href={button.url}
            target="_blank"
            rel="noopener noreferrer"
            className={`group flex flex-col items-center justify-center rounded-2xl border-2 border-red-100 bg-white text-center shadow-sm transition-all hover:border-red-500 hover:shadow-lg hover:-translate-y-0.5 ${
              isKiosk ? 'min-h-40 p-8' : 'min-h-32 p-6'
            }`}
          >
            <span
              className={`mb-3 flex items-center justify-center rounded-full bg-red-50 text-red-600 group-hover:bg-red-600 group-hover:text-white transition-colors ${
                isKiosk ? 'h-16 w-16 text-3xl' : 'h-12 w-12 text-2xl'
              }`}
            >
              <i className="fa-solid fa-arrow-up-right-from-square" />
            </span>
            <span className={`font-bold text-gray-800 ${isKiosk ? 'text-2xl' : 'text-lg'}`}>
              {title}
            </span>
            <span className="mt-2 text-xs text-gray-400 truncate max-w-full px-2">{subtitle}</span>
          </a>
        );
      })}
    </div>
  );
};

export default FeedInButtonGrid;