"use client"

import type React from "react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Upload, Download, FileText, Archive, Code } from "lucide-react"
import { useRef } from "react"

interface FileUploadProps {
  onUpload: (file: File) => void
  onDownload: () => void
  onExportHTML: () => void
}

export function FileUpload({ onUpload, onDownload, onExportHTML }: FileUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      onUpload(file)
      event.target.value = ""
    }
  }

  const exportZip = () => {
    // This would create a ZIP file with all generated files
    console.log("Exporting as ZIP...")
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Archive className="h-5 w-5" />
          File Management
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="file-upload">Import Chat History</Label>
          <div className="flex gap-2">
            <Input
              id="file-upload"
              type="file"
              accept=".json"
              onChange={handleFileUpload}
              ref={fileInputRef}
              className="flex-1"
            />
            <Button variant="outline" onClick={() => fileInputRef.current?.click()}>
              <Upload className="h-4 w-4" />
            </Button>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2">
          <Button variant="outline" onClick={onDownload} className="gap-2 bg-transparent">
            <Download className="h-4 w-4" />
            JSON History
          </Button>

          <Button variant="outline" onClick={onExportHTML} className="gap-2 bg-transparent">
            <FileText className="h-4 w-4" />
            HTML Export
          </Button>

          <Button variant="outline" onClick={exportZip} className="gap-2 bg-transparent">
            <Archive className="h-4 w-4" />
            ZIP Package
          </Button>

          <Button variant="outline" className="gap-2 bg-transparent">
            <Code className="h-4 w-4" />
            Source Code
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}