veza/apps/web/src/components/studio/projects/ProjectDetailView.tsx

import React, { useState } from 'react';
import { Card } from '../../ui/card';
import { Button } from '../../ui/button';
import { Badge } from '../../ui/badge';
import { Input } from '../../ui/input';
import {
  ArrowLeft,
  Play,
  Users,
  FileAudio,
  Save,
  Trash2,
  HardDrive,
  Share2,
  MoreHorizontal,
  Activity,
  History,
  Upload,
} from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface ProjectDetailViewProps {
  project: any;
  onBack: () => void;
  onUpdate: (updatedProject: any) => void;
  onDelete: (id: string) => void;
}

export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
  project,
  onBack,
  onUpdate,
  onDelete,
}) => {
  const { addToast } = useToast();
  const [activeTab, setActiveTab] = useState<'overview' | 'files' | 'settings'>(
    'overview',
  );
  const [_editMode, setEditMode] = useState(false);
  const [formData, setFormData] = useState(project);

  // Mock Files for this project
  const [projectFiles, _setProjectFiles] = useState([
    {
      id: 'f1',
      name: 'Demo_v3.mp3',
      size: '4.2 MB',
      type: 'audio',
      date: '2h ago',
    },
    {
      id: 'f2',
      name: 'Stems_Drums.zip',
      size: '45 MB',
      type: 'archive',
      date: '1d ago',
    },
    {
      id: 'f3',
      name: 'Vocals_Dry.wav',
      size: '22 MB',
      type: 'audio',
      date: '1d ago',
    },
  ]);

  const handleSaveSettings = () => {
    onUpdate(formData);
    setEditMode(false);
    addToast('Project settings saved', 'success');
  };

  const handleDelete = () => {
    if (confirm('Are you sure? This action cannot be undone.')) {
      onDelete(project.id);
    }
  };

  return (
    <div className="animate-fadeIn pb-20 space-y-6">
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-start gap-4">
        <div className="flex gap-4">
          <Button variant="ghost" size="icon" onClick={onBack}>
            <ArrowLeft className="w-5 h-5" />
          </Button>
          <div>
            <div className="flex items-center gap-3 mb-1">
              <h2 className="text-3xl font-display font-bold text-white">
                {project.name}
              </h2>
              <Badge
                label={project.daw}
                variant={
                  project.daw === 'Ableton'
                    ? 'cyan'
                    : project.daw === 'FL Studio'
                      ? 'gold'
                      : 'magenta'
                }
              />
            </div>
            <div className="flex items-center gap-4 text-sm text-gray-400 font-mono">
              <span>{project.bpm} BPM</span>
              <span>{project.key}</span>
              <span>Updated {project.modified}</span>
            </div>
          </div>
        </div>
        <div className="flex gap-2">
          <Button
            variant="secondary"
            icon={<Share2 className="w-4 h-4" />}
            onClick={() => addToast('Collaboration link copied')}
          >
            Invite
          </Button>
          <Button
            variant="primary"
            icon={<Play className="w-4 h-4 fill-current" />}
            onClick={() => addToast(`Opening in ${project.daw}...`, 'success')}
          >
            Open DAW
          </Button>
        </div>
      </div>

      {/* Navigation Tabs */}
      <div className="border-b border-kodo-steel flex gap-6">
        {['overview', 'files', 'settings'].map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab as any)}
            className={`pb-3 text-sm font-bold uppercase tracking-wider border-b-2 transition-colors ${activeTab === tab ? 'border-kodo-cyan text-white' : 'border-transparent text-gray-500 hover:text-gray-300'}`}
          >
            {tab}
          </button>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Main Content Area */}
        <div className="lg:col-span-2 space-y-6">
          {activeTab === 'overview' && (
            <>
              <Card variant="default">
                <h3 className="font-bold text-white mb-4">Project Status</h3>
                <div className="space-y-4">
                  <div className="flex justify-between text-sm text-gray-400 mb-1">
                    <span>Completion</span>
                    <span className="text-white">{project.progress}%</span>
                  </div>
                  <div className="h-2 bg-kodo-steel rounded-full overflow-hidden">
                    <div
                      className="h-full bg-kodo-cyan"
                      style={{ width: `${project.progress}%` }}
                    ></div>
                  </div>

                  <div className="flex gap-4 pt-2">
                    <div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
                      <div className="text-xs text-gray-500 uppercase">
                        Status
                      </div>
                      <div className="text-sm font-bold text-white">
                        {project.status}
                      </div>
                    </div>
                    <div className="flex-1 bg-kodo-ink p-3 rounded border border-kodo-steel">
                      <div className="text-xs text-gray-500 uppercase">
                        Version
                      </div>
                      <div className="text-sm font-bold text-white">v1.4.2</div>
                    </div>
                  </div>
                </div>
              </Card>

              <Card variant="default">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="font-bold text-white flex items-center gap-2">
                    <Activity className="w-4 h-4 text-kodo-gold" /> Recent
                    Activity
                  </h3>
                </div>
                <div className="space-y-4 relative">
                  <div className="absolute left-2.5 top-2 bottom-2 w-px bg-kodo-steel"></div>
                  {[1, 2, 3].map((_, i) => (
                    <div key={i} className="relative pl-8">
                      <div className="absolute left-0 top-1 w-5 h-5 bg-kodo-graphite border border-kodo-cyan rounded-full flex items-center justify-center">
                        <div className="w-2 h-2 bg-kodo-cyan rounded-full"></div>
                      </div>
                      <div className="text-sm text-gray-300">
                        <span className="font-bold text-white">You</span>{' '}
                        uploaded a new bounce.
                      </div>
                      <div className="text-xs text-gray-500">2 hours ago</div>
                    </div>
                  ))}
                </div>
              </Card>
            </>
          )}

          {activeTab === 'files' && (
            <Card variant="default">
              <div className="flex justify-between items-center mb-6">
                <h3 className="font-bold text-white">Project Files</h3>
                <Button
                  variant="secondary"
                  size="sm"
                  icon={<Upload className="w-4 h-4" />}
                >
                  Upload
                </Button>
              </div>
              <div className="space-y-2">
                {projectFiles.map((file) => (
                  <div
                    key={file.id}
                    className="flex items-center justify-between p-3 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group"
                  >
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-gray-400">
                        {file.type === 'audio' ? (
                          <FileAudio className="w-5 h-5" />
                        ) : (
                          <HardDrive className="w-5 h-5" />
                        )}
                      </div>
                      <div>
                        <div className="font-bold text-sm text-white">
                          {file.name}
                        </div>
                        <div className="text-xs text-gray-500">
                          {file.size} • {file.date}
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                      <Button variant="ghost" size="icon">
                        <Play className="w-4 h-4" />
                      </Button>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="w-4 h-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          )}

          {activeTab === 'settings' && (
            <div className="space-y-6">
              <Card variant="default">
                <h3 className="font-bold text-white mb-6 border-b border-kodo-steel pb-2">
                  Project Settings
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <Input
                    label="Project Name"
                    value={formData.name}
                    onChange={(e) =>
                      setFormData({ ...formData, name: e.target.value })
                    }
                  />
                  <Input
                    label="Status"
                    value={formData.status}
                    onChange={(e) =>
                      setFormData({ ...formData, status: e.target.value })
                    }
                  />
                </div>
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <Input
                    label="BPM"
                    value={formData.bpm}
                    onChange={(e) =>
                      setFormData({ ...formData, bpm: e.target.value })
                    }
                  />
                  <Input
                    label="Key"
                    value={formData.key}
                    onChange={(e) =>
                      setFormData({ ...formData, key: e.target.value })
                    }
                  />
                </div>
                <div className="flex justify-end pt-2">
                  <Button
                    variant="primary"
                    icon={<Save className="w-4 h-4" />}
                    onClick={handleSaveSettings}
                  >
                    Save Changes
                  </Button>
                </div>
              </Card>

              <Card variant="default" className="border-kodo-red/30">
                <h3 className="font-bold text-white mb-4 text-kodo-red flex items-center gap-2">
                  <Trash2 className="w-4 h-4" /> Danger Zone
                </h3>
                <p className="text-sm text-gray-400 mb-4">
                  Permanently delete this project and all associated files.
                </p>
                <Button
                  variant="ghost"
                  className="text-kodo-red border border-kodo-red/50 hover:bg-kodo-red/10 w-full"
                  onClick={handleDelete}
                >
                  Delete Project
                </Button>
              </Card>
            </div>
          )}
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          <Card variant="gaming">
            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
              <Users className="w-4 h-4 text-kodo-gold" /> Collaborators
            </h3>
            <div className="flex -space-x-3 mb-4">
              <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-700"></div>
              <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-gray-600"></div>
              <div className="w-10 h-10 rounded-full border-2 border-kodo-graphite bg-kodo-ink flex items-center justify-center text-xs text-gray-400 font-bold">
                +2
              </div>
            </div>
            <Button
              variant="ghost"
              size="sm"
              className="w-full text-xs border border-kodo-steel"
            >
              Manage Team
            </Button>
          </Card>

          <Card variant="default">
            <h3 className="font-bold text-white mb-4 text-sm uppercase tracking-wider flex items-center gap-2">
              <History className="w-4 h-4 text-kodo-magenta" /> Versions
            </h3>
            <div className="space-y-2">
              <div className="flex justify-between items-center text-sm p-2 bg-white/5 rounded">
                <span className="text-white">v1.4 (Current)</span>
                <span className="text-xs text-gray-500">2h ago</span>
              </div>
              <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
                <span>v1.3</span>
                <span className="text-xs text-gray-600">1d ago</span>
              </div>
              <div className="flex justify-between items-center text-sm p-2 hover:bg-white/5 rounded cursor-pointer text-gray-400">
                <span>v1.2</span>
                <span className="text-xs text-gray-600">3d ago</span>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </div>
  );
};