'use client';

import { useState } from 'react';
import Link from 'next/link';
import { ArrowLeft, ChevronDown, ChevronUp, Plus, Trash2, GripVertical } from 'lucide-react';
import { Page, ContentBlock, LocalizedString } from '@/types';
import Button from '@/components/ui/Button';
import Input, { Textarea, Select } from '@/components/ui/Input';
import TagInput from '@/components/ui/TagInput';
import LanguageTabs, { useLanguageTabs, Lang } from '@/components/ui/LanguageTabs';

interface PageFormProps {
  initialData?: Page;
  onSave: (data: Partial<Page>) => void;
  isSaving: boolean;
}

const BLOCK_TYPES: ContentBlock['type'][] = [
  'hero', 'text', 'image', 'gallery', 'video', 'cta', 'stats',
  'testimonials', 'team', 'services', 'contact', 'custom',
];

const emptyLS = (): LocalizedString => ({ en: '', zh: '' });

function asLS(val: unknown): LocalizedString {
  if (val && typeof val === 'object' && 'en' in val) return val as LocalizedString;
  if (typeof val === 'string') return { en: val, zh: '' };
  return emptyLS();
}

export default function PageForm({ initialData, onSave, isSaving }: PageFormProps) {
  const { activeLang, setActiveLang } = useLanguageTabs();
  const [title, setTitle] = useState<LocalizedString>(asLS(initialData?.title));
  const [excerpt, setExcerpt] = useState<LocalizedString>(asLS(initialData?.excerpt));
  const [template, setTemplate] = useState<Page['template']>(initialData?.template ?? 'default');
  const [status, setStatus] = useState<Page['status']>(initialData?.status ?? 'draft');
  const [featuredImage, setFeaturedImage] = useState(initialData?.featuredImage ?? '');
  const [blocks, setBlocks] = useState<ContentBlock[]>(initialData?.content ?? []);
  const [seoTitle, setSeoTitle] = useState(initialData?.seo?.title ?? '');
  const [seoDesc, setSeoDesc] = useState(initialData?.seo?.description ?? '');
  const [seoKeywords, setSeoKeywords] = useState<string[]>(initialData?.seo?.keywords ?? []);
  const [seoOpen, setSeoOpen] = useState(false);

  const updateLS = (setter: React.Dispatch<React.SetStateAction<LocalizedString>>, lang: Lang, value: string) => {
    setter((prev) => ({ ...prev, [lang]: value }));
  };

  const addBlock = (type: ContentBlock['type']) => {
    setBlocks([...blocks, { type, order: blocks.length, data: {} }]);
  };

  const removeBlock = (idx: number) => {
    setBlocks(blocks.filter((_, i) => i !== idx).map((b, i) => ({ ...b, order: i })));
  };

  const updateBlockData = (idx: number, jsonStr: string) => {
    try {
      const data = JSON.parse(jsonStr);
      setBlocks(blocks.map((b, i) => (i === idx ? { ...b, data } : b)));
    } catch {
      // invalid JSON, ignore
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave({
      title,
      excerpt: excerpt.en || excerpt.zh ? excerpt : undefined,
      template,
      status,
      featuredImage: featuredImage || undefined,
      content: blocks,
      seo: {
        title: seoTitle || undefined,
        description: seoDesc || undefined,
        keywords: seoKeywords.length ? seoKeywords : undefined,
      },
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link href="/pages" className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg">
            <ArrowLeft size={18} />
          </Link>
          <h1 className="text-2xl font-bold text-gray-900">
            {initialData ? 'Edit Page' : 'New Page'}
          </h1>
        </div>
        <div className="flex items-center gap-3">
          <Select
            value={status}
            onChange={(e) => setStatus(e.target.value as Page['status'])}
            options={[
              { value: 'draft', label: 'Draft' },
              { value: 'published', label: 'Published' },
              { value: 'archived', label: 'Archived' },
            ]}
            className="w-36"
          />
          <Button type="submit" isLoading={isSaving}>
            {initialData ? 'Save changes' : 'Create page'}
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div className="lg:col-span-2 space-y-5">
          <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
            <LanguageTabs activeLang={activeLang} onChange={setActiveLang} />

            <Input
              label={`Title (${activeLang.toUpperCase()})`}
              value={title[activeLang]}
              onChange={(e) => updateLS(setTitle, activeLang, e.target.value)}
              required={activeLang === 'en'}
              placeholder={activeLang === 'en' ? 'Page title' : '頁面標題'}
            />
            {initialData?.slug && (
              <p className="text-xs text-gray-400">Slug: <code className="text-gray-600">/{initialData.slug}</code></p>
            )}
            <Textarea
              label={`Excerpt (${activeLang.toUpperCase()})`}
              value={excerpt[activeLang]}
              onChange={(e) => updateLS(setExcerpt, activeLang, e.target.value)}
              rows={2}
              placeholder={activeLang === 'en' ? 'Short page description' : '簡短頁面描述'}
            />
          </div>

          <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
            <h3 className="text-sm font-semibold text-gray-700">Content Blocks</h3>

            {blocks.length === 0 && (
              <p className="text-sm text-gray-400">No content blocks yet. Add one below.</p>
            )}

            <div className="space-y-3">
              {blocks.map((block, idx) => (
                <div key={idx} className="border border-gray-200 rounded-lg overflow-hidden">
                  <div className="flex items-center gap-2 px-3 py-2.5 bg-gray-50 border-b border-gray-200">
                    <GripVertical size={14} className="text-gray-400" />
                    <span className="text-xs font-medium text-gray-600 capitalize flex-1">{block.type} block</span>
                    <button type="button" onClick={() => removeBlock(idx)} className="text-gray-400 hover:text-red-500 p-0.5">
                      <Trash2 size={13} />
                    </button>
                  </div>
                  <div className="p-3">
                    <label className="block text-xs text-gray-500 mb-1">Block data (JSON)</label>
                    <textarea
                      defaultValue={JSON.stringify(block.data, null, 2)}
                      onBlur={(e) => updateBlockData(idx, e.target.value)}
                      rows={4}
                      className="w-full font-mono text-xs p-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y"
                    />
                  </div>
                </div>
              ))}
            </div>

            <div>
              <p className="text-xs text-gray-500 mb-2">Add a block:</p>
              <div className="flex flex-wrap gap-2">
                {BLOCK_TYPES.map((type) => (
                  <button
                    key={type}
                    type="button"
                    onClick={() => addBlock(type)}
                    className="flex items-center gap-1 px-2.5 py-1 text-xs border border-gray-200 rounded-md text-gray-600 hover:bg-gray-50 hover:border-blue-300 hover:text-blue-600 transition-colors"
                  >
                    <Plus size={11} />
                    {type}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-5">
          <div className="bg-white rounded-xl border border-gray-200 p-5 space-y-4">
            <Select
              label="Template"
              value={template}
              onChange={(e) => setTemplate(e.target.value as Page['template'])}
              options={[
                { value: 'default', label: 'Default' },
                { value: 'landing', label: 'Landing' },
                { value: 'about', label: 'About' },
                { value: 'services', label: 'Services' },
                { value: 'contact', label: 'Contact' },
                { value: 'custom', label: 'Custom' },
              ]}
            />
          </div>

          <div className="bg-white rounded-xl border border-gray-200 p-5">
            <Input
              label="Featured Image URL"
              value={featuredImage}
              onChange={(e) => setFeaturedImage(e.target.value)}
              placeholder="https://..."
              type="url"
            />
            {featuredImage && (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={featuredImage} alt="Featured" className="mt-3 w-full h-32 object-cover rounded-lg" />
            )}
          </div>

          <div className="bg-white rounded-xl border border-gray-200">
            <button
              type="button"
              className="w-full flex items-center justify-between px-5 py-3.5 text-sm font-medium text-gray-700"
              onClick={() => setSeoOpen(!seoOpen)}
            >
              SEO Settings
              {seoOpen ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
            </button>
            {seoOpen && (
              <div className="px-5 pb-5 space-y-4 border-t border-gray-100">
                <Input label="SEO Title" value={seoTitle} onChange={(e) => setSeoTitle(e.target.value)} />
                <Textarea label="SEO Description" value={seoDesc} onChange={(e) => setSeoDesc(e.target.value)} rows={3} />
                <TagInput label="Keywords" value={seoKeywords} onChange={setSeoKeywords} />
              </div>
            )}
          </div>
        </div>
      </div>
    </form>
  );
}