import { useState } from 'react';
import { FileText, Upload, FolderOpen } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import UploadArea from '@/components/Documents/UploadArea';
import DocumentList from '@/components/Documents/DocumentList';
import PreviewPanel from '@/components/Documents/PreviewPanel';
import { useWorkspace } from '@/hooks/useWorkspace';
import { useTranslate } from '@/utils/i18n';
import { ApiDocument } from '@/service/types';
import { useDocumentUpload } from '@/hooks/useDocuments';

export default function DocumentsPage() {
  const t = useTranslate();
  const { workspaceId } = useWorkspace();
  const [selectedDoc, setSelectedDoc] = useState<ApiDocument | null>(null);

  const uploadMutation = useDocumentUpload();

  const handleUpload = async (file: File) => {
    await uploadMutation.mutateAsync({
      file,
      workspaceId: workspaceId,
    });
  };

  return (
    <div className="container mx-auto py-6 px-4 md:px-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <FileText className="w-6 h-6" />
            {t('documents.title')}
          </h1>
          <p className="text-sm text-muted-foreground mt-1">
            {t('documents.description')}
          </p>
        </div>

        <div className="flex items-center gap-2">
          <Button onClick={() => document.getElementById('doc-upload-input')?.click()}>
            <Upload className="w-4 h-4 mr-2" />
            {t('documents.upload')}
          </Button>
          <input
            id="doc-upload-input"
            type="file"
            accept=".docx,.pdf,.txt"
            className="hidden"
            onChange={(e) => {
              const file = e.target.files?.[0];
              if (file) handleUpload(file);
            }}
          />
        </div>
      </div>

      {/* Workspace indicator */}
      {currentWorkspace && (
        <Card className="mb-6">
          <CardContent className="pt-4">
            <div className="flex items-center gap-2 text-sm">
              <FolderOpen className="w-4 h-4 text-muted-foreground" />
              <span className="text-muted-foreground">{t('documents.workspace')}:</span>
              <span className="font-medium">{currentWorkspace.name}</span>
              <span className="text-muted-foreground">({workspaceId})</span>
            </div>
          </CardContent>
        </Card>
      )}

      <Tabs defaultValue="list" className="space-y-4">
        <TabsList>
          <TabsTrigger value="list">
            <FolderOpen className="w-4 h-4 mr-2" />
            {t('documents.tabs.list')}
          </TabsTrigger>
          <TabsTrigger value="upload">
            <Upload className="w-4 h-4 mr-2" />
            {t('documents.tabs.upload')}
          </TabsTrigger>
        </TabsList>

        <TabsContent value="list" className="space-y-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            {/* Document list */}
            <div className="lg:col-span-2">
              <Card>
                <CardContent className="p-4">
                  <DocumentList
                    workspaceId={workspaceId}
                    onSelectDocument={setSelectedDoc}
                  />
                </CardContent>
              </Card>
            </div>

            {/* Preview panel */}
            <div className="lg:col-span-1">
              <Card className="h-full">
                <CardContent className="p-0 h-[calc(100vh-250px)]">
                  <PreviewPanel
                    document={selectedDoc}
                    onProcess={(docId) => {
                      // Refresh after processing
                      setTimeout(() => setSelectedDoc(null), 1000);
                    }}
                    onImport={(docId) => {
                      // Clear selection after import
                      setSelectedDoc(null);
                    }}
                  />
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="upload">
          <Card>
            <CardContent className="p-6">
              <div className="max-w-2xl mx-auto">
                <h2 className="text-lg font-semibold mb-4">
                  {t('documents.upload_title')}
                </h2>
                <UploadArea onUpload={handleUpload} isLoading={uploadMutation.isPending} />

                <Separator className="my-6" />

                <div className="space-y-4">
                  <h3 className="font-medium">{t('documents.supported_formats')}</h3>
                  <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
                    <li>DOCX (.docx) - Microsoft Word documents</li>
                    <li>PDF (.pdf) - Adobe PDF files</li>
                    <li>TXT (.txt) - Plain text files</li>
                  </ul>
                </div>

                <Separator className="my-6" />

                <div className="space-y-4">
                  <h3 className="font-medium">{t('documents.features')}</h3>
                  <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
                    <li>{t('documents.feature_extract')}</li>
                    <li>{t('documents.feature_ai')}</li>
                    <li>{t('documents.feature_import')}</li>
                    <li>{t('documents.feature_workspace')}</li>
                  </ul>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}
