Input Modal

'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Avatar, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import {
  Headphones,
  X,
  FileText,
  ChevronDown,
  ArrowDownNarrowWide,
  Upload,
  Link,
  FolderOpen,
  Search,
  Play,
  Clock,
  Globe,
  Youtube,
  FileImage,
  Copy,
  Star,
} from 'lucide-react';

interface Project {
  id: string;
  name: string;
  type: 'pdf' | 'url' | 'audio';
  size?: string;
  duration?: string;
  createdAt: string;
  thumbnail?: string;
  status: 'completed' | 'processing' | 'draft';
}

const mockProjects: Project[] = [
  {
    id: '1',
    name: 'Future Thinking Talk.pdf',
    type: 'pdf',
    size: '45.4 KB',
    createdAt: '2 hours ago',
    status: 'completed',
  },
  {
    id: '2',
    name: 'AI Revolution Article',
    type: 'url',
    duration: '12:34',
    createdAt: '1 day ago',
    status: 'completed',
  },
  {
    id: '3',
    name: 'Tech Trends 2024',
    type: 'audio',
    duration: '8:45',
    createdAt: '3 days ago',
    status: 'processing',
  },
  {
    id: '4',
    name: 'Climate Change Report',
    type: 'pdf',
    size: '2.1 MB',
    createdAt: '1 week ago',
    status: 'draft',
  },
];

export default function InputModel() {
  const [isOpen, setIsOpen] = useState(true);
  const [activeTab, setActiveTab] = useState('upload');
  const [urlInput, setUrlInput] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedProject, setSelectedProject] = useState<string | null>(null);
  const [selected, setSelected] = useState('morgan');
  const [selected2, setSelected2] = useState('');
  const [selected3, setSelected3] = useState('');
  const [selected4, setSelected4] = useState('');
  const [selected5, setSelected5] = useState('');
  const [selected6, setSelected6] = useState('');

  const filteredProjects = mockProjects.filter((project) =>
    project.name.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  const getProjectIcon = (type: string) => {
    switch (type) {
      case 'pdf':
        return <FileText className="w-4 h-4" />;
      case 'url':
        return <Globe className="w-4 h-4" />;
      case 'audio':
        return <Headphones className="w-4 h-4" />;
      default:
        return <FileText className="w-4 h-4" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400';
      case 'processing':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400';
      case 'draft':
        return 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400';
      default:
        return 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-400';
    }
  };

  if (!isOpen) {
    return (
      <div className="flex items-center justify-center">
        <Button onClick={() => setIsOpen(true)}>Open Audio Show Creator</Button>
      </div>
    );
  }

  return (
    <div className="flex items-center justify-center p-4 ">
      <Card className="w-full max-w-xl max-h-[90vh] overflow-y-auto rounded-3xl shadow-2xl border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950">
        <CardContent className="p-4 sm:p-6 lg:p-8 h-full overflow-y-auto">
          <div className="flex items-start justify-between mb-6">
            <div className="flex gap-3 sm:gap-4 flex-1">
              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-neutral-800 dark:bg-neutral-700 rounded-2xl flex items-center justify-center flex-shrink-0">
                <Headphones className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
              </div>
              <div className="flex-1 min-w-0">
                <h1 className="text-base sm:text-lg font-semibold mb-2 text-neutral-900 dark:text-neutral-100">
                  Create Your Audio Show
                </h1>
                <p className="text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed font-normal">
                  Drop a document or paste a link — GenFM will instantly turn it into a fully voiced
                  podcast you can preview, edit, and download.
                </p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setIsOpen(false)}
              className="text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300 -mt-2 -mr-2 flex-shrink-0"
            >
              <X className="w-5 h-5" />
            </Button>
          </div>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6 sm:mb-8">
            <TabsList className="grid w-full grid-cols-3 rounded-xl p-1 bg-neutral-100 dark:bg-neutral-800">
              <TabsTrigger
                value="upload"
                className="rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100"
              >
                <Upload className="w-4 h-4 mr-1 sm:mr-2" />
                <span className="hidden sm:inline">Upload File</span>
                <span className="sm:hidden">Upload</span>
              </TabsTrigger>
              <TabsTrigger
                value="url"
                className="rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100"
              >
                <Link className="w-4 h-4 mr-1 sm:mr-2" />
                <span className="hidden sm:inline">Import via URL</span>
                <span className="sm:hidden">URL</span>
              </TabsTrigger>
              <TabsTrigger
                value="existing"
                className="rounded-lg font-medium text-xs sm:text-sm data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:data-[state=active]:bg-neutral-700 dark:data-[state=active]:text-neutral-100"
              >
                <FolderOpen className="w-4 h-4 mr-1 sm:mr-2" />
                <span className="hidden sm:inline">Choose Existing</span>
                <span className="sm:hidden">Existing</span>
              </TabsTrigger>
            </TabsList>
            <TabsContent value="upload" className="mt-6">
              <div className="border-2 border-dashed border-neutral-300 dark:border-neutral-700 rounded-xl p-8 text-center bg-neutral-50 dark:bg-neutral-900/50">
                <div className="w-12 h-12 bg-neutral-200 dark:bg-neutral-800 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Upload className="w-6 h-6 text-neutral-600 dark:text-neutral-400" />
                </div>
                <h3 className="text-lg font-medium mb-2 text-neutral-900 dark:text-neutral-100">
                  Drop your file here
                </h3>
                <p className="text-neutral-600 dark:text-neutral-400 mb-4">
                  Support for PDF, DOCX, TXT files up to 10MB
                </p>
                <Button
                  variant="outline"
                  className="border-neutral-300 dark:border-neutral-700 bg-transparent"
                >
                  Browse Files
                </Button>
              </div>
            </TabsContent>
            <TabsContent value="url" className="mt-6">
              <div className="space-y-4">
                <div>
                  <Label
                    htmlFor="url-input"
                    className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
                  >
                    Content URL
                  </Label>
                  <div className="mt-2">
                    <Input
                      id="url-input"
                      type="url"
                      placeholder="https://example.com/article or YouTube URL"
                      value={urlInput}
                      onChange={(e) => setUrlInput(e.target.value)}
                      className="w-full h-12 rounded-xl border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900"
                    />
                  </div>
                </div>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                  <div className="flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50">
                    <Globe className="w-4 h-4 text-neutral-600 dark:text-neutral-400" />
                    <span className="text-xs text-neutral-600 dark:text-neutral-400">Articles</span>
                  </div>
                  <div className="flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50">
                    <Youtube className="w-4 h-4 text-neutral-600 dark:text-neutral-400" />
                    <span className="text-xs text-neutral-600 dark:text-neutral-400">YouTube</span>
                  </div>
                  <div className="flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50">
                    <FileText className="w-4 h-4 text-neutral-600 dark:text-neutral-400" />
                    <span className="text-xs text-neutral-600 dark:text-neutral-400">Blogs</span>
                  </div>
                  <div className="flex items-center gap-2 p-3 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50">
                    <FileImage className="w-4 h-4 text-neutral-600 dark:text-neutral-400" />
                    <span className="text-xs text-neutral-600 dark:text-neutral-400">News</span>
                  </div>
                </div>
                {urlInput && (
                  <div className="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-lg flex items-center justify-center">
                        <Globe className="w-4 h-4 text-neutral-600 dark:text-neutral-400" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate">
                          Ready to import content
                        </p>
                        <p className="text-xs text-neutral-600 dark:text-neutral-400 truncate">
                          {urlInput}
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </TabsContent>
            <TabsContent value="existing" className="mt-6">
              <div className="space-y-4">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-neutral-400" />
                  <Input
                    placeholder="Search projects..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10 h-12 rounded-xl border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900"
                  />
                </div>
                <div className="max-h-64 overflow-y-auto space-y-2">
                  {filteredProjects.map((project) => (
                    <div
                      key={project.id}
                      onClick={() => setSelectedProject(project.id)}
                      className={`p-4 rounded-xl border cursor-pointer transition-all ${
                        selectedProject === project.id
                          ? 'border-neutral-400 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800'
                          : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600 bg-white dark:bg-neutral-900/50'
                      }`}
                    >
                      <div className="flex items-center gap-3">
                        <div className="w-8 h-8 bg-neutral-200 dark:bg-neutral-800 rounded-lg flex items-center justify-center">
                          {getProjectIcon(project.type)}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center gap-2 mb-1">
                            <p className="text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate">
                              {project.name}
                            </p>
                            <Badge
                              className={`text-xs px-2 py-0.5 ${getStatusColor(project.status)}`}
                            >
                              {project.status}
                            </Badge>
                          </div>
                          <div className="flex items-center gap-4 text-xs text-neutral-600 dark:text-neutral-400">
                            <span className="flex items-center gap-1">
                              <Clock className="w-3 h-3" />
                              {project.createdAt}
                            </span>
                            {project.size && <span>{project.size}</span>}
                            {project.duration && (
                              <span className="flex items-center gap-1">
                                <Play className="w-3 h-3" />
                                {project.duration}
                              </span>
                            )}
                          </div>
                        </div>
                        <div className="flex items-center gap-1">
                          <Button variant="ghost" size="icon" className="w-8 h-8">
                            <Copy className="w-3 h-3" />
                          </Button>
                          <Button variant="ghost" size="icon" className="w-8 h-8">
                            <Star className="w-3 h-3" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </TabsContent>
          </Tabs>
          <div className="space-y-6">
            <div>
              <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                Format Style
              </Label>
              <Select defaultValue="default" onValueChange={setSelected5}>
                <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                  <div className="flex items-center justify-between w-full">
                    <span className="font-medium text-neutral-900 dark:text-neutral-100">
                      {selected5 || 'Interview Mode'}
                    </span>
                    <div className="bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-2 py-1 mr-2 rounded-md text-xs">
                      Default
                    </div>
                  </div>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="default">Interview Mode</SelectItem>
                  <SelectItem value="narrative">Narrative Style</SelectItem>
                  <SelectItem value="discussion">Panel Discussion</SelectItem>
                  <SelectItem value="monologue">Solo Monologue</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
              <div>
                <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                  Host Voice
                </Label>
                <Select defaultValue="alex" onValueChange={setSelected2}>
                  <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                    <div className="flex items-center gap-3">
                      <Avatar className="w-6 h-6">
                        <AvatarImage src="/voice1.png" alt="Alex" />
                      </Avatar>
                      <span className="font-medium text-neutral-900 dark:text-neutral-100">
                        {selected2 || 'alex'}
                      </span>
                    </div>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="alex">Alex</SelectItem>
                    <SelectItem value="sarah">Sarah</SelectItem>
                    <SelectItem value="mike">Mike</SelectItem>
                    <SelectItem value="emma">Emma</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                  Guest Voice
                </Label>
                <Select defaultValue="morgan" onValueChange={setSelected}>
                  <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                    <div className="flex items-center gap-3">
                      <Avatar className="w-6 h-6">
                        <AvatarImage src="/voice2.png" alt="Morgan" />
                      </Avatar>
                      <span className="font-medium text-neutral-900 dark:text-neutral-100">
                        {selected}
                      </span>
                    </div>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="morgan">Morgan</SelectItem>
                    <SelectItem value="jordan">Jordan</SelectItem>
                    <SelectItem value="taylor">Taylor</SelectItem>
                    <SelectItem value="casey">Casey</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
              <div>
                <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                  Voice Engine
                </Label>
                <Select defaultValue="eleven-v2" onValueChange={setSelected3}>
                  <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                    <div className="flex items-center justify-between w-full">
                      <span className="font-medium text-neutral-900 dark:text-neutral-100">
                        {selected3 || 'Eleven AI v2'}
                      </span>
                      <div className="bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300 px-2 py-1 mr-2 rounded-md text-xs">
                        Multilingual
                      </div>
                    </div>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="eleven-v2">Eleven AI v2</SelectItem>
                    <SelectItem value="eleven-v1">Eleven AI v1</SelectItem>
                    <SelectItem value="openai">OpenAI TTS</SelectItem>
                    <SelectItem value="azure">Azure Speech</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                  Language
                </Label>
                <Select defaultValue="auto" onValueChange={setSelected4}>
                  <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                    <span className="font-medium text-neutral-900 dark:text-neutral-100">
                      {selected4 || 'Auto-detect'}
                    </span>
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="auto">Auto-detect</SelectItem>
                    <SelectItem value="english">English</SelectItem>
                    <SelectItem value="spanish">Spanish</SelectItem>
                    <SelectItem value="french">French</SelectItem>
                    <SelectItem value="german">German</SelectItem>
                    <SelectItem value="italian">Italian</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <Label className="block text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">
                Audio Quality
              </Label>
              <Select defaultValue="studio" onValueChange={setSelected6}>
                <SelectTrigger className="w-full border-neutral-300 dark:border-neutral-700 rounded-xl h-12 bg-white dark:bg-neutral-900">
                  <span className="font-medium text-neutral-900 dark:text-neutral-100">
                    {selected6 || 'Studio Quality'}
                  </span>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="studio">Studio Quality</SelectItem>
                  <SelectItem value="high">High Quality</SelectItem>
                  <SelectItem value="standard">Standard Quality</SelectItem>
                  <SelectItem value="compressed">Compressed</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-5 mt-8 pt-6 border-t border-neutral-200 dark:border-neutral-800">
            <Button
              variant="outline"
              className="rounded-xl px-4 sm:px-6 h-12 border-neutral-300 dark:border-neutral-700 bg-transparent text-sm flex items-center justify-center order-2 sm:order-1"
            >
              <ArrowDownNarrowWide className="h-4 w-4 mr-2" />
              Recent
              <ChevronDown className="w-4 h-4 ml-2" />
            </Button>
            <Button className="bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-100 dark:hover:bg-neutral-200 dark:text-neutral-900 text-white rounded-xl px-6 sm:px-8 h-12 font-medium order-1 sm:order-2">
              Generate
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}