fractafrag/services/frontend/src/pages/Generate.tsx

/**
 * AI Generation page — prompt-to-shader interface.
 * Stub for M5 — shows UI with "coming soon" state.
 */

import { useState } from 'react';
import { useAuthStore } from '@/stores/auth';
import { Link } from 'react-router-dom';

export default function Generate() {
  const { isAuthenticated, user } = useAuthStore();
  const [prompt, setPrompt] = useState('');

  return (
    <div className="max-w-3xl mx-auto px-4 py-6">
      <div className="text-center mb-8">
        <h1 className="text-2xl font-bold">AI Shader Generator</h1>
        <p className="text-gray-400 mt-2">
          Describe what you want to see and let AI write the shader for you.
        </p>
      </div>

      <div className="card p-6">
        {/* Prompt input */}
        <div className="mb-6">
          <label className="block text-sm text-gray-400 mb-2">What do you want to see?</label>
          <textarea
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            className="input min-h-[100px] resize-y font-normal"
            placeholder="A flowing aurora borealis with deep purples and greens, slowly morphing..."
          />
        </div>

        {/* Style controls */}
        <div className="grid grid-cols-3 gap-4 mb-6">
          <div>
            <label className="block text-xs text-gray-500 mb-1">Chaos Level</label>
            <input type="range" min="0" max="100" defaultValue="50"
              className="w-full accent-fracta-500" />
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Color Temperature</label>
            <select className="input text-sm">
              <option>Warm</option>
              <option>Cool</option>
              <option>Neutral</option>
              <option>Monochrome</option>
            </select>
          </div>
          <div>
            <label className="block text-xs text-gray-500 mb-1">Motion Type</label>
            <select className="input text-sm">
              <option>Fluid</option>
              <option>Geometric</option>
              <option>Pulsing</option>
              <option>Static</option>
            </select>
          </div>
        </div>

        {/* Generate button / status */}
        <div className="text-center">
          <button
            disabled
            className="btn-primary opacity-60 cursor-not-allowed px-8 py-3 text-lg"
          >
            ✨ Generate Shader
          </button>
          <p className="text-sm text-gray-500 mt-3">
            AI generation is coming in M5. For now, use the{' '}
            <Link to="/editor" className="text-fracta-400 hover:text-fracta-300">editor</Link>{' '}
            to write shaders manually.
          </p>

          {isAuthenticated() && user && (
            <p className="text-xs text-gray-600 mt-2">
              Credits remaining: {user.ai_credits_remaining}
            </p>
          )}
        </div>
      </div>

      {/* Teaser examples */}
      <div className="mt-8">
        <h2 className="text-sm font-medium text-gray-400 mb-3">Example prompts (coming soon)</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {[
            "Ragdoll physics but dark and slow",
            "Underwater caustics with bioluminescent particles",
            "Infinite fractal zoom through a crystal cathedral",
            "VHS glitch art with neon pink scanlines",
          ].map((example) => (
            <button
              key={example}
              onClick={() => setPrompt(example)}
              className="text-left p-3 bg-surface-2 hover:bg-surface-3 rounded-lg text-sm text-gray-400 transition-colors"
            >
              "{example}"
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}