'use client';

import React, { useState } from 'react';
import { DemoStoreItem } from '@/lib/saas-admin/demoData';

interface PlanEditModalProps {
  store: DemoStoreItem | null;
  onClose: () => void;
  onSavePlan: (storeId: string, newPlan: string) => Promise<void>;
  availablePlans: Array<{ id: string; name: string; price: number }>;
}

export default function PlanEditModal({
  store,
  onClose,
  onSavePlan,
  availablePlans,
}: PlanEditModalProps) {
  const [selectedPlan, setSelectedPlan] = useState(store?.plan.toLowerCase() || 'growth');
  const [isSubmitting, setIsSubmitting] = useState(false);

  if (!store) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      await onSavePlan(store.id, selectedPlan);
      onClose();
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto bg-slate-900/50 backdrop-blur-xs flex items-center justify-center p-4 animate-in fade-in">
      <div className="bg-white rounded-3xl border border-slate-200 shadow-2xl w-full max-w-md overflow-hidden animate-in zoom-in-95">
        <div className="p-5 border-b border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-xl bg-theme/10 text-theme border border-theme/20 flex items-center justify-center font-bold text-xs">
              <i className="fa-solid fa-arrows-rotate" />
            </div>
            <div>
              <h3 className="text-sm font-bold text-slate-900">Change Store Plan</h3>
              <p className="text-[11px] text-slate-400 font-mono">{store.shopify_domain}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-lg text-slate-400 hover:text-slate-600 flex items-center justify-center cursor-pointer"
          >
            ✕
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          <div className="space-y-2">
            <label className="text-xs font-bold text-slate-700">Select Plan Tier</label>
            <div className="grid grid-cols-1 gap-2">
              {(availablePlans && availablePlans.length > 0
                ? availablePlans.map((p) => ({
                    ...p,
                    desc:
                      p.id === 'basic'
                        ? '100 SKUs, 1 Pixel, Free tier'
                        : p.id === 'growth'
                        ? '5,000 SKUs, Unlimited Pixels, CAPI'
                        : 'Unlimited SKUs, Full bot protection, Scale tier',
                  }))
                : [
                    { id: 'basic', name: 'Free Plan', price: 0, desc: '100 SKUs, Free tier' },
                    { id: 'growth', name: 'Growth Plan', price: 13, desc: '5,000 SKUs, Unlimited Pixels, CAPI' },
                    { id: 'scale', name: 'Scale Plan', price: 99, desc: 'Unlimited SKUs, Full bot protection' },
                  ]
              ).map((p) => (
                <label
                  key={p.id}
                  className={`p-3 rounded-xl border flex items-center justify-between cursor-pointer transition-all ${
                    selectedPlan === p.id
                      ? 'border-theme bg-theme/5 shadow-2xs'
                      : 'border-slate-200 hover:bg-slate-50'
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <input
                      type="radio"
                      name="plan"
                      value={p.id}
                      checked={selectedPlan === p.id}
                      onChange={(e) => setSelectedPlan(e.target.value)}
                      className="accent-theme"
                    />
                    <div>
                      <div className="text-xs font-bold text-slate-900">{p.name}</div>
                      <div className="text-[11px] text-slate-400">{p.desc}</div>
                    </div>
                  </div>
                  <span className="text-xs font-black text-slate-900">${p.price}/mo</span>
                </label>
              ))}
            </div>
          </div>

          <div className="p-3 rounded-xl bg-amber-50 border border-amber-200 text-[11px] text-amber-800 flex items-start gap-2">
            <i className="fa-solid fa-triangle-exclamation text-amber-600 mt-0.5" />
            <span>
              Updating this plan changes the store&apos;s active quota limits and will reflect immediately in the SaaS dashboard metrics.
            </span>
          </div>

          <div className="flex items-center justify-end gap-2 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 rounded-xl text-xs font-semibold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 cursor-pointer"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={isSubmitting}
              className="px-4 py-2 rounded-xl text-xs font-bold bg-theme hover:bg-theme-hover text-white shadow-2xs flex items-center gap-1.5 transition-colors cursor-pointer"
            >
              {isSubmitting && <i className="fa-solid fa-arrows-rotate fa-spin text-xs" />}
              <span>Save Plan Changes</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}