"use client";

import { useEffect, useState } from "react";
import Editor from "@monaco-editor/react";
import { Button } from "@/components/ui/button";
import { Play, Download } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ProjectFile } from "@/types/project";

interface CodeEditorProps {
  files: ProjectFile[];
  activeFile: string;
  onFileChange: (fileName: string, newCode: string) => void;
  onFileSelect: (fileName: string) => void;
  onExport: () => void;
}

const CodeEditor = ({
  files,
  activeFile,
  onFileChange,
  onFileSelect,
  onExport
}: CodeEditorProps) => {
  const currentFile = files.find(f => f.name === activeFile);

  return (
    <div className="h-full flex flex-col bg-gray-50">
      <Tabs value={activeFile} onValueChange={onFileSelect} className="h-full flex flex-col">
        <div className="p-2 border-b bg-white">
          <TabsList>
            {files.map(file => (
              <TabsTrigger key={file.name} value={file.name}>
                {file.name}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>
        
        <Card className="flex-1 border-0 shadow-none">
          <CardContent className="p-0 h-full">
            {files.map(file => (
              <TabsContent key={file.name} value={file.name} className="h-full m-0">
                <Editor
                  height="100%"
                  defaultLanguage="html"
                  value={file.code}
                  onChange={(value) => onFileChange(file.name, value || "")}
                  theme="vs-light"
                  options={{
                    minimap: { enabled: true },
                    scrollBeyondLastLine: false,
                    automaticLayout: true,
                    fontSize: 14,
                    tabSize: 2,
                    wordWrap: "on",
                  }}
                />
              </TabsContent>
            ))}
          </CardContent>
        </Card>
      </Tabs>
      <div className="p-3 border-t bg-white flex justify-end items-center">
        <Button 
          onClick={onExport} 
          size="sm" 
          variant="outline"
          disabled={files.length === 0}
          className="border-gray-300"
        >
          <Download className="h-4 w-4 mr-1" />
          Export Project
        </Button>
      </div>
    </div>
  );
};

export default CodeEditor;