'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import dynamic from 'next/dynamic';

interface DesignApproval {
  id: string;
  customerEmail: string;
  customerName: string | null;
  productId: string;
  product: {
    id: string;
    name: string;
    basePrice: number;
    personalisedPrice: number;
    onSale: boolean;
    effectivePrice: number;
    colors: string[];
    sizes: string[];
    showOnPersonalised: boolean;
    imageUrl: string | null;
    imageUrlBack: string | null;
    photoRecolorable: boolean;
    colorPhotos: Record<string, string>;
    colorPhotosBack: Record<string, string>;
    printArea: string;
    printAreaBack: string | null;
    mockup: string;
    referenceWidthCm: number | null;
    referenceHeightCm: number | null;
  };
  designJson: string;
  color: string;
  size: string | null;
  status: string;
}

const DesignCanvas = dynamic(() => import('@/components/DesignCanvas'), { ssr: false });

export default function EditDesignPage({ params }: { params: { id: string } }) {
  const router = useRouter();
  const [design, setDesign] = useState<DesignApproval | null>(null);
  const [loading, setLoading] = useState(true);
  const [sending, setSending] = useState(false);

  useEffect(() => {
    fetch(`/api/designs/${params.id}`)
      .then((r) => r.json())
      .then((data) => {
        if (data.product) {
          const parseIfString = (val: any) => typeof val === 'string' ? JSON.parse(val) : val;
          data.product.colors = Array.isArray(data.product.colors) ? data.product.colors : parseIfString(data.product.colors || '[]');
          data.product.sizes = Array.isArray(data.product.sizes) ? data.product.sizes : (data.product.sizes ? parseIfString(data.product.sizes) : []);
          data.product.colorPhotos = typeof data.product.colorPhotos === 'object' ? data.product.colorPhotos : (data.product.colorPhotos ? parseIfString(data.product.colorPhotos) : {});
          data.product.colorPhotosBack = typeof data.product.colorPhotosBack === 'object' ? data.product.colorPhotosBack : (data.product.colorPhotosBack ? parseIfString(data.product.colorPhotosBack) : {});
          data.product.printArea = typeof data.product.printArea === 'object' ? data.product.printArea : parseIfString(data.product.printArea || '{"xPct":0,"yPct":0,"wPct":1,"hPct":1}');
          if (data.product.printAreaBack) {
            data.product.printAreaBack = typeof data.product.printAreaBack === 'object' ? data.product.printAreaBack : parseIfString(data.product.printAreaBack);
          }
        }
        setDesign(data);
        setLoading(false);
      })
      .catch((err) => {
        console.error('Error fetching design:', err);
        setLoading(false);
      });
  }, [params.id]);

  const handleSendToCustomer = async () => {
    setSending(true);
    try {
      const res = await fetch(`/api/designs/${params.id}/send-to-customer`, {
        method: 'POST',
      });
      if (res.ok) {
        router.push(`/admin/designs/${params.id}`);
      } else {
        alert('Failed to send to customer');
      }
    } finally {
      setSending(false);
    }
  };

  if (loading) return <div className="p-6">Loading...</div>;
  if (!design) return <div className="p-6 text-sm text-muted">Design not found.</div>;

  return (
    <div className="min-h-screen bg-paper">
      <div className="mx-auto max-w-7xl px-6 py-8">
        <Link href={`/admin/designs/${params.id}`} className="text-sm text-clay hover:text-clay-dark mb-4 inline-block">
          ← Back to design approval
        </Link>

        <div className="mb-6 flex items-center justify-between">
          <div>
            <h1 className="font-display text-3xl mb-2">{design.product.name}</h1>
            <p className="text-sm text-muted">Editing design for {design.customerName || design.customerEmail}</p>
          </div>
          <button
            onClick={handleSendToCustomer}
            disabled={sending}
            className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark disabled:opacity-60"
          >
            {sending ? 'Sending…' : 'Send to Customer for Review'}
          </button>
        </div>

        {/* Full Design Canvas */}
        <DesignCanvas product={design.product} isAdminEditing={true} />
      </div>
    </div>
  );
}
