'use client';

import {useState} from 'react';
import {Heading, Text} from '@astryxdesign/core/Text';
import {Badge} from '@astryxdesign/core/Badge';
import {PAYMENT_BREAKDOWN_DATA} from '../../services/commerceService';

export function PaymentBreakdown() {
  const [selectedMethod, setSelectedMethod] = useState<string | null>(null);

  const activeItem = selectedMethod
    ? PAYMENT_BREAKDOWN_DATA.find((p) => p.method === selectedMethod)
    : null;

  return (
    <div className="rounded-xl border border-border bg-card p-5 space-y-4 shadow-sm overflow-hidden">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
          <Heading level={4} className="text-base font-bold text-white">
            Payment Methods Breakdown
          </Heading>
          <Text size="sm" color="secondary">
            Revenue share distribution by payment channel
          </Text>
        </div>

        {/* Interactive Channel Filter Buttons */}
        <div className="flex items-center gap-1.5 flex-wrap">
          <button
            type="button"
            onClick={() => setSelectedMethod(null)}
            className={`px-2.5 py-1 rounded-md text-xs font-bold transition-all ${
              selectedMethod === null
                ? 'bg-zinc-700 text-white shadow-sm'
                : 'bg-zinc-900/80 text-zinc-400 hover:text-white border border-zinc-800'
            }`}
          >
            All
          </button>
          {PAYMENT_BREAKDOWN_DATA.map((item) => (
            <button
              key={item.method}
              type="button"
              onClick={() =>
                setSelectedMethod(selectedMethod === item.method ? null : item.method)
              }
              className={`px-2.5 py-1 rounded-md text-xs font-bold transition-all flex items-center gap-1.5 ${
                selectedMethod === item.method
                  ? 'text-white border shadow-sm'
                  : 'bg-zinc-900/80 text-zinc-400 hover:text-white border border-zinc-800'
              }`}
              style={{
                borderColor: selectedMethod === item.method ? item.color : undefined,
                backgroundColor: selectedMethod === item.method ? `${item.color}22` : undefined,
              }}
            >
              <span
                className="size-2 rounded-full shrink-0"
                style={{backgroundColor: item.color}}
              />
              {item.method.split(' ')[0]}
            </button>
          ))}
        </div>
      </div>

      {/* Visual Ring / Stack Bar */}
      <div className="h-4 w-full rounded-full bg-zinc-800 overflow-hidden flex shadow-inner p-0.5">
        {PAYMENT_BREAKDOWN_DATA.map((item) => {
          const isSelected = selectedMethod === null || selectedMethod === item.method;
          return (
            <div
              key={item.method}
              onClick={() =>
                setSelectedMethod(selectedMethod === item.method ? null : item.method)
              }
              style={{
                width: `${item.percentage}%`,
                backgroundColor: item.color,
                opacity: isSelected ? 1 : 0.25,
              }}
              className="h-full cursor-pointer transition-all duration-300 first:rounded-l-full last:rounded-r-full hover:brightness-125"
              title={`${item.method}: ${item.percentage}% (${item.amount}) — Click to filter`}
            />
          );
        })}
      </div>

      {/* Interactive Breakdown Cards */}
      <div className="grid grid-cols-2 gap-3 pt-1">
        {PAYMENT_BREAKDOWN_DATA.map((item) => {
          const isSelected = selectedMethod === item.method;
          return (
            <div
              key={item.method}
              onClick={() =>
                setSelectedMethod(isSelected ? null : item.method)
              }
              className={`flex items-center justify-between p-3 rounded-xl cursor-pointer transition-all border ${
                isSelected
                  ? 'bg-zinc-800/90 shadow-md ring-1'
                  : selectedMethod !== null
                  ? 'bg-zinc-900/40 border-zinc-800/60 opacity-60 hover:opacity-100'
                  : 'bg-zinc-900/60 border-zinc-800 hover:border-zinc-700'
              }`}
              style={{
                borderColor: isSelected ? item.color : undefined,
              }}
            >
              <div className="flex items-center gap-2.5 min-w-0">
                <span
                  className="size-3.5 rounded-full shrink-0 shadow-sm"
                  style={{backgroundColor: item.color}}
                />
                <div>
                  <span className="text-xs font-bold text-white block truncate">
                    {item.method}
                  </span>
                  <span className="text-[10px] font-semibold text-zinc-400">
                    {item.percentage}% share
                  </span>
                </div>
              </div>

              <div className="text-right shrink-0">
                <div className="text-xs font-bold text-white tabular-nums">
                  {item.amount}
                </div>
                {isSelected ? (
                  <Badge variant="success" label="Selected" />
                ) : null}
              </div>
            </div>
          );
        })}
      </div>

      {/* Selected Channel Deep-Dive Banner */}
      {activeItem ? (
        <div className="p-3 rounded-lg bg-zinc-900/90 border border-zinc-700 flex items-center justify-between text-xs animate-fadeIn">
          <div className="flex items-center gap-2">
            <span
              className="size-2.5 rounded-full"
              style={{backgroundColor: activeItem.color}}
            />
            <span className="font-bold text-white">{activeItem.method} Channel Details:</span>
            <span className="text-zinc-300">
              {activeItem.amount} collected today across all active store POS terminals.
            </span>
          </div>
          <button
            type="button"
            onClick={() => setSelectedMethod(null)}
            className="text-zinc-400 hover:text-white font-bold text-xs"
          >
            Clear Filter ✕
          </button>
        </div>
      ) : null}
    </div>
  );
}
