'use client';

/**
 * Generated App - Generated by ${VOCAB.factory}
 * This app was automatically generated and deployed.
 */

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { ArrowLeft, Bug, RefreshCw, Home } from 'lucide-react';
import { InternalHeader } from '@/components/ui/internal-header';

// Import the generated main component
import MainComponent from './components/MainComponent';
import { VOCAB } from '@/lib/white-label/constants';

export default function GeneratedAppPage() {
  const [showFeedback, setShowFeedback] = useState(false);
  const [feedback, setFeedback] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleFeedback = async () => {
    if (!feedback.trim()) return;
    setSubmitting(true);
    try {
      await fetch('/api/dark-factory/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          appSlug: 'create-a-swag-store-for-ghostf',
          feedback: feedback.trim(),
          url: window.location.href,
        }),
      });
      setSubmitted(true);
      setTimeout(() => {
        setShowFeedback(false);
        setSubmitted(false);
        setFeedback('');
      }, 2000);
    } catch (e) {
      console.error('Failed to submit feedback:', e);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <>
      <InternalHeader />
      <div className="min-h-screen bg-brand-bg pt-16">
        {/* App Header */}
        <div className="border-b border-white/10 bg-white/5">
          <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link
                href="/ghost-control/dark-factory"
                className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
              >
                <ArrowLeft className="w-4 h-4" />
                <span className="text-sm">{VOCAB.factory}</span>
              </Link>
              <span className="text-gray-600">|</span>
              <h1 className="text-white font-medium">Generated App</h1>
              <span className="px-2 py-0.5 text-xs bg-green-500/20 text-green-400 rounded-full">Live</span>
            </div>
            <button
              onClick={() => setShowFeedback(!showFeedback)}
              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-orange-500/20 text-orange-400 rounded-lg hover:bg-orange-500/30 transition-colors"
            >
              <Bug className="w-4 h-4" />
              Report Issue
            </button>
          </div>
        </div>

        {/* Feedback Panel */}
        {showFeedback && (
          <div className="border-b border-orange-500/30 bg-orange-500/10">
            <div className="max-w-7xl mx-auto px-4 py-4">
              <div className="flex gap-4">
                <textarea
                  value={feedback}
                  onChange={(e) => setFeedback(e.target.value)}
                  placeholder="Describe the issue... (e.g., 'Delete button doesn't work' or 'Form doesn't save')"
                  className="flex-1 px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 text-sm resize-none"
                  rows={2}
                />
                <button
                  onClick={handleFeedback}
                  disabled={submitting || !feedback.trim()}
                  className="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
                >
                  {submitted ? '✓ Sent!' : submitting ? 'Sending...' : 'Submit'}
                </button>
              </div>
            </div>
          </div>
        )}

        {/* Main App Content */}
        <div className="max-w-7xl mx-auto px-4 py-6">
          <MainComponent />
        </div>
      </div>
    </>
  );
}
