"use client";
import React, { useMemo, useState } from 'react';
import PageLayout from '../../../components/PageLayout';
import useCoffeeManagement from '../hooks/useCoffeeManagement';
import { PhotoIcon } from '@heroicons/react/24/solid';
import Link from 'next/link';
import { useRouter } from 'next/navigation';

export default function CreateSubscriptionPage() {
  const { createProduct } = useCoffeeManagement();
  const router = useRouter();

  const [error, setError] = useState<string | null>(null);

  // form state
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [price, setPrice] = useState(0);
  const [state, setState] = useState<'available'|'unavailable'>('available');
  const [pictureFile, setPictureFile] = useState<File | undefined>(undefined);
  const [currency, setCurrency] = useState('EUR');
  const [isFeatured, setIsFeatured] = useState(false);
  // Fixed billing defaults (locked: month / 1)
  const billingInterval: 'month' = 'month';
  const intervalCount: number = 1;

  const onCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    try {
      await createProduct({
        title,
        description,
        price,
        currency,
        is_featured: isFeatured,
        state: state === 'available',
        pictureFile
      });
      router.push('/admin/subscriptions');
    } catch (e: any) {
      setError(e.message || 'Failed to create');
    }
  };

  return (
    <PageLayout>
      <div className="bg-gradient-to-tr from-blue-50 via-white to-blue-100 min-h-screen">
        <main className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
          {/* Header */}
          <header className="sticky top-0 z-10 bg-white/90 backdrop-blur border-b border-blue-100 py-10 px-8 rounded-2xl shadow-lg flex flex-col gap-4 mb-8">
            <div className="flex items-center justify-between">
              <div>
                <h1 className="text-4xl font-extrabold text-blue-900 tracking-tight">Create Subscription</h1>
                <p className="text-lg text-blue-700 mt-2">Add a new product or subscription plan.</p>
              </div>
              <Link href="/admin/subscriptions"
                className="inline-flex items-center gap-2 rounded-lg bg-blue-900 hover:bg-blue-800 text-blue-50 px-5 py-3 text-base font-semibold shadow transition"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
                Back to list
              </Link>
            </div>
          </header>

          <div className="rounded-2xl border border-gray-100 bg-white p-8 shadow-lg">
            <form onSubmit={onCreate} className="space-y-8">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                {/* Title */}
                <div>
                  <label htmlFor="title" className="block text-sm font-medium text-blue-900">Title</label>
                  <input id="title" name="title" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
                </div>
                {/* Price */}
                <div>
                  <label htmlFor="price" className="block text-sm font-medium text-blue-900">Price</label>
                  <input id="price" name="price" required min={0.01} step={0.01} className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="Price" type="number" value={price} onChange={e => setPrice(Number(e.target.value))} />
                </div>
                {/* Currency */}
                <div>
                  <label htmlFor="currency" className="block text-sm font-medium text-blue-900">Currency (e.g., EUR)</label>
                  <input id="currency" name="currency" required maxLength={3} pattern="[A-Za-z]{3}" className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" placeholder="EUR" value={currency} onChange={e => setCurrency(e.target.value.toUpperCase().slice(0,3))} />
                </div>
                {/* Featured */}
                <div className="flex items-center gap-2 mt-6">
                  <input id="featured" type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-900 focus:ring-blue-900" checked={isFeatured} onChange={e => setIsFeatured(e.target.checked)} />
                  <label htmlFor="featured" className="text-sm font-medium text-blue-900">Featured</label>
                </div>
                {/* Fixed Billing (Locked) */}
                <div className="sm:col-span-2">
                  <label className="block text-sm font-medium text-blue-900">Billing</label>
                  <p className="mt-1 text-xs text-gray-600">Fixed monthly billing (interval count = 1). These settings are locked.</p>
                  <div className="mt-2 flex gap-4">
                    <input disabled value={billingInterval} className="w-40 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
                    <input disabled value={intervalCount} className="w-24 rounded-lg border-gray-300 bg-gray-100 px-4 py-3 text-sm text-gray-600" />
                  </div>
                </div>
                {/* Availability */}
                <div>
                  <label htmlFor="availability" className="block text-sm font-medium text-blue-900">Availability</label>
                  <select id="availability" name="availability" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black" value={state} onChange={e => setState(e.target.value as any)}>
                    <option value="available">Available</option>
                    <option value="unavailable">Unavailable</option>
                  </select>
                </div>
              </div>

              {/* Description */}
              <div>
                <label htmlFor="description" className="block text-sm font-medium text-blue-900">Description</label>
                <textarea id="description" name="description" required className="mt-1 block w-full rounded-lg border-gray-300 shadow focus:border-blue-900 focus:ring-blue-900 px-4 py-3 text-black placeholder:text-gray-400" rows={3} placeholder="Describe the product" value={description} onChange={e => setDescription(e.target.value)} />
                <p className="mt-1 text-xs text-gray-600">Shown to users in the shop and checkout.</p>
              </div>

              {/* Picture Upload */}
              <div>
                <label className="block text-sm font-medium text-blue-900">Picture</label>
                <div
                  className="mt-2 flex max-w-xl justify-center rounded-lg border border-dashed border-blue-300 px-6 py-10 bg-blue-50 cursor-pointer"
                  onClick={() => document.getElementById('file-upload')?.click()}
                  onDragOver={e => e.preventDefault()}
                  onDrop={e => {
                    e.preventDefault();
                    if (e.dataTransfer.files?.[0]) setPictureFile(e.dataTransfer.files[0]);
                  }}
                >
                  <div className="text-center w-full">
                    <PhotoIcon aria-hidden="true" className="mx-auto h-12 w-12 text-blue-400" />
                    <div className="mt-4 text-sm text-blue-700">
                      <span>Drag and drop an image here</span>
                    </div>
                    <p className="text-xs text-blue-600 mt-2">PNG, JPG up to 10MB</p>
                    {pictureFile && (
                      <p className="mt-2 text-xs text-blue-900 font-medium">{pictureFile.name}</p>
                    )}
                  </div>
                  <input
                    id="file-upload"
                    name="file-upload"
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={e => setPictureFile(e.target.files?.[0])}
                  />
                </div>
              </div>

              {/* Actions */}
              <div className="flex items-center justify-end gap-x-4">
                <Link href="/admin/subscriptions" className="text-sm font-medium text-blue-900 hover:text-blue-700">
                  Cancel
                </Link>
                <button type="submit" className="inline-flex justify-center rounded-lg bg-blue-900 px-5 py-3 text-sm font-semibold text-blue-50 shadow hover:bg-blue-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-900 transition">
                  Create
                </button>
              </div>

              {error && <p className="text-sm text-red-600">{error}</p>}
            </form>
          </div>
        </main>
      </div>
    </PageLayout>
  );
}