'use client';

/**
 * Generate Form Placeholder Component
 *
 * Main content for lab generation interface.
 * Clean, work-focused design with compact layout.
 * Uses Shadcn UI components with custom slate styling.
 *
 * Features:
 * - Compact info banner (dismissible)
 * - Prompt textarea with keyboard shortcuts (Shadcn Textarea)
 * - Options grid with Shadcn Select dropdowns
 * - Results area with empty state
 * - Lucide icons throughout
 *
 * Color scheme: Forms use slate palette (original style)
 */

import { useState, KeyboardEvent } from 'react';
import {
  Info,
  X,
  Loader2,
  Settings,
  ImageOff,
  Trash2,
  Sparkles,
  Wand2,
  Palette,
  Image,
  Layers,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

// Shared styles for consistent theming
const selectTriggerStyles = "w-full bg-slate-800 border-slate-700 text-white focus:ring-purple-500 focus:ring-offset-0 hover:bg-slate-700/50";
const selectContentStyles = "bg-slate-800 border-slate-700";
const selectItemStyles = "text-white focus:bg-slate-700 focus:text-white";
const inputStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0";
const textareaStyles = "bg-slate-800 border-slate-700 text-white placeholder:text-gray-500 focus-visible:ring-purple-500 focus-visible:ring-offset-0 resize-none";
const labelStyles = "text-xs font-medium text-gray-400";
const cardStyles = "p-4 bg-slate-900/80 backdrop-blur-sm border-slate-700 rounded-xl gap-0 py-4";

export const GenerateFormPlaceholder = () => {
  const [prompt, setPrompt] = useState('');
  const [aspectRatio, setAspectRatio] = useState('1:1');
  const [template, setTemplate] = useState('photorealistic');
  const [generating, setGenerating] = useState(false);
  const [showBanner, setShowBanner] = useState(true);

  const handleGenerate = () => {
    if (!prompt.trim()) return;
    setGenerating(true);
    setTimeout(() => setGenerating(false), 2000);
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.ctrlKey && e.key === 'Enter') {
      e.preventDefault();
      handleGenerate();
    }
  };

  return (
    <div className="p-4 md:p-6 space-y-4">
      {/* Compact Info Banner */}
      {showBanner && (
        <div className="p-3 bg-purple-900/10 border border-purple-700/50 rounded-lg">
          <div className="flex items-start gap-2">
            <Info className="w-4 h-4 text-purple-400 mt-0.5 shrink-0" />
            <div className="flex-1">
              <p className="text-xs text-gray-300">
                <span className="font-medium text-white">Lab Mode:</span>{' '}
                Experimental features enabled. API calls may be rate-limited.
              </p>
            </div>
            <Button
              variant="ghost"
              size="icon-sm"
              onClick={() => setShowBanner(false)}
              className="p-1 h-auto w-auto text-gray-500 hover:text-gray-300 hover:bg-transparent"
              aria-label="Dismiss"
            >
              <X className="w-3 h-3" />
            </Button>
          </div>
        </div>
      )}

      {/* Generation Form Card */}
      <Card className={cardStyles} aria-label="Image Generation Form">
        <CardContent className="p-0 px-4 space-y-3">
          {/* Prompt Textarea */}
          <div>
            <Label htmlFor="lab-prompt-input" className={labelStyles}>
              Prompt
            </Label>
            <Textarea
              id="lab-prompt-input"
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="Describe the image you want to generate..."
              disabled={generating}
              rows={4}
              className={`mt-1.5 ${textareaStyles}`}
              aria-label="Image generation prompt"
            />
          </div>

          {/* Options Row */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
            {/* Aspect Ratio */}
            <div>
              <Label htmlFor="lab-aspect-ratio" className={labelStyles}>
                Aspect Ratio
              </Label>
              <Select value={aspectRatio} onValueChange={setAspectRatio} disabled={generating}>
                <SelectTrigger id="lab-aspect-ratio" className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue placeholder="Select ratio" />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="1:1" className={selectItemStyles}>Square (1:1)</SelectItem>
                  <SelectItem value="3:4" className={selectItemStyles}>Portrait (3:4)</SelectItem>
                  <SelectItem value="4:3" className={selectItemStyles}>Landscape (4:3)</SelectItem>
                  <SelectItem value="9:16" className={selectItemStyles}>Vertical (9:16)</SelectItem>
                  <SelectItem value="16:9" className={selectItemStyles}>Widescreen (16:9)</SelectItem>
                  <SelectItem value="21:9" className={selectItemStyles}>Ultrawide (21:9)</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Template */}
            <div>
              <Label htmlFor="lab-template" className={labelStyles}>
                Style Template
              </Label>
              <Select value={template} onValueChange={setTemplate} disabled={generating}>
                <SelectTrigger id="lab-template" className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue placeholder="Select style" />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="photorealistic" className={selectItemStyles}>Photorealistic</SelectItem>
                  <SelectItem value="illustration" className={selectItemStyles}>Illustration</SelectItem>
                  <SelectItem value="minimalist" className={selectItemStyles}>Minimalist</SelectItem>
                  <SelectItem value="sticker" className={selectItemStyles}>Sticker</SelectItem>
                  <SelectItem value="product" className={selectItemStyles}>Product</SelectItem>
                  <SelectItem value="comic" className={selectItemStyles}>Comic</SelectItem>
                  <SelectItem value="general" className={selectItemStyles}>General</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Advanced Options Button */}
            <div>
              <Label className={labelStyles}>Advanced</Label>
              <Button
                variant="outline"
                disabled={generating}
                className={`mt-1.5 w-full ${selectTriggerStyles} justify-center`}
                aria-label="Advanced options"
              >
                <Settings className="w-4 h-4" />
                <span>Configure</span>
              </Button>
            </div>
          </div>

          {/* Submit Button Row */}
          <div className="flex items-center justify-between gap-3 pt-3 border-t border-slate-700/50">
            <div className="text-xs text-gray-500">
              {generating ? (
                <span className="flex items-center gap-1.5 text-purple-400">
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  Generating...
                </span>
              ) : (
                <span className="hidden sm:inline">Ctrl+Enter to submit</span>
              )}
            </div>
            <Button
              onClick={handleGenerate}
              disabled={generating || !prompt.trim()}
              className="bg-gradient-to-r from-purple-600 to-cyan-600 text-white font-semibold hover:from-purple-500 hover:to-cyan-500 shadow-lg shadow-purple-900/30"
            >
              <Sparkles className="w-4 h-4" />
              {generating ? 'Generating...' : 'Generate'}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Results Area */}
      <section className="space-y-3" aria-label="Generated Results">
        <div className="flex items-center justify-between">
          <h2 className="text-sm font-semibold text-white">Results</h2>
          <Button variant="ghost" size="sm" className="h-auto py-1 text-xs text-gray-500 hover:text-gray-300 hover:bg-transparent">
            <Trash2 className="w-3.5 h-3.5" />
            Clear
          </Button>
        </div>

        {/* Empty State */}
        {!generating && (
          <div className="p-6 bg-slate-900/50 backdrop-blur-sm border border-slate-700 rounded-lg text-center">
            <div className="w-12 h-12 mx-auto mb-3 flex items-center justify-center bg-slate-800 rounded-lg">
              <ImageOff className="w-6 h-6 text-gray-500" />
            </div>
            <h3 className="text-sm font-medium text-white mb-1">No results yet</h3>
            <p className="text-xs text-gray-400">
              Generated images will appear here
            </p>
          </div>
        )}

        {/* Loading State */}
        {generating && (
          <div className="p-4 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg animate-pulse">
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
              <div className="aspect-square bg-slate-800 rounded-lg"></div>
              <div className="aspect-square bg-slate-800 rounded-lg"></div>
              <div className="aspect-square bg-slate-800 rounded-lg hidden xl:block"></div>
            </div>
          </div>
        )}
      </section>

      {/* Additional Form Sections for Scroll Testing */}
      <Card className={cardStyles}>
        <CardHeader className="p-0 px-4 pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
            <Wand2 className="w-4 h-4 text-purple-400" />
            Style Refinement
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0 px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <Label className={labelStyles}>Color Palette</Label>
              <Select defaultValue="vibrant">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="vibrant" className={selectItemStyles}>Vibrant</SelectItem>
                  <SelectItem value="muted" className={selectItemStyles}>Muted</SelectItem>
                  <SelectItem value="monochrome" className={selectItemStyles}>Monochrome</SelectItem>
                  <SelectItem value="pastel" className={selectItemStyles}>Pastel</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Lighting</Label>
              <Select defaultValue="natural">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="natural" className={selectItemStyles}>Natural</SelectItem>
                  <SelectItem value="studio" className={selectItemStyles}>Studio</SelectItem>
                  <SelectItem value="dramatic" className={selectItemStyles}>Dramatic</SelectItem>
                  <SelectItem value="soft" className={selectItemStyles}>Soft</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Mood</Label>
              <Select defaultValue="neutral">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="neutral" className={selectItemStyles}>Neutral</SelectItem>
                  <SelectItem value="happy" className={selectItemStyles}>Happy</SelectItem>
                  <SelectItem value="mysterious" className={selectItemStyles}>Mysterious</SelectItem>
                  <SelectItem value="energetic" className={selectItemStyles}>Energetic</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Detail Level</Label>
              <Select defaultValue="high">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="high" className={selectItemStyles}>High</SelectItem>
                  <SelectItem value="medium" className={selectItemStyles}>Medium</SelectItem>
                  <SelectItem value="low" className={selectItemStyles}>Low</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className={cardStyles}>
        <CardHeader className="p-0 px-4 pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
            <Palette className="w-4 h-4 text-purple-400" />
            Color Controls
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0 px-4 space-y-3">
          <div>
            <Label className={labelStyles}>Primary Color</Label>
            <Input type="text" placeholder="#8B5CF6" className={`mt-1.5 ${inputStyles}`} />
          </div>
          <div>
            <Label className={labelStyles}>Secondary Color</Label>
            <Input type="text" placeholder="#06B6D4" className={`mt-1.5 ${inputStyles}`} />
          </div>
          <div>
            <Label className={labelStyles}>Background Hint</Label>
            <Input type="text" placeholder="e.g., gradient, solid, transparent" className={`mt-1.5 ${inputStyles}`} />
          </div>
        </CardContent>
      </Card>

      <Card className={cardStyles}>
        <CardHeader className="p-0 px-4 pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
            <Image className="w-4 h-4 text-purple-400" />
            Reference Images
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0 px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="aspect-square bg-slate-800 border border-slate-700 border-dashed rounded-lg flex items-center justify-center">
                <span className="text-xs text-gray-500">Drop image</span>
              </div>
            ))}
          </div>
          <p className="mt-2 text-xs text-gray-500">Upload up to 4 reference images to guide the generation</p>
        </CardContent>
      </Card>

      <Card className={cardStyles}>
        <CardHeader className="p-0 px-4 pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
            <Layers className="w-4 h-4 text-purple-400" />
            Advanced Parameters
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0 px-4 space-y-3">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
            <div>
              <Label className={labelStyles}>Guidance Scale</Label>
              <Input type="number" defaultValue={7.5} step={0.5} min={1} max={20} className={`mt-1.5 ${inputStyles}`} />
            </div>
            <div>
              <Label className={labelStyles}>Steps</Label>
              <Input type="number" defaultValue={30} step={5} min={10} max={100} className={`mt-1.5 ${inputStyles}`} />
            </div>
            <div>
              <Label className={labelStyles}>Seed</Label>
              <Input type="number" placeholder="Random" className={`mt-1.5 ${inputStyles}`} />
            </div>
          </div>
          <div>
            <Label className={labelStyles}>Negative Prompt</Label>
            <Textarea rows={2} placeholder="Elements to avoid in the generation..." className={`mt-1.5 ${textareaStyles}`} />
          </div>
        </CardContent>
      </Card>

      <Card className={cardStyles}>
        <CardHeader className="p-0 px-4 pb-3">
          <CardTitle className="flex items-center gap-2 text-sm font-semibold text-white">
            <Settings className="w-4 h-4 text-purple-400" />
            Output Settings
          </CardTitle>
        </CardHeader>
        <CardContent className="p-0 px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <Label className={labelStyles}>Output Format</Label>
              <Select defaultValue="png">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="png" className={selectItemStyles}>PNG</SelectItem>
                  <SelectItem value="jpeg" className={selectItemStyles}>JPEG</SelectItem>
                  <SelectItem value="webp" className={selectItemStyles}>WebP</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Quality</Label>
              <Select defaultValue="max">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="max" className={selectItemStyles}>Maximum (100%)</SelectItem>
                  <SelectItem value="high" className={selectItemStyles}>High (90%)</SelectItem>
                  <SelectItem value="medium" className={selectItemStyles}>Medium (80%)</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Number of Images</Label>
              <Select defaultValue="1">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="1" className={selectItemStyles}>1</SelectItem>
                  <SelectItem value="2" className={selectItemStyles}>2</SelectItem>
                  <SelectItem value="4" className={selectItemStyles}>4</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label className={labelStyles}>Auto-save to</Label>
              <Select defaultValue="default">
                <SelectTrigger className={`mt-1.5 ${selectTriggerStyles}`}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className={selectContentStyles}>
                  <SelectItem value="default" className={selectItemStyles}>Default folder</SelectItem>
                  <SelectItem value="favorites" className={selectItemStyles}>Favorites</SelectItem>
                  <SelectItem value="none" className={selectItemStyles}>Don&apos;t save</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};
