'use client';

import { useEffect, useState } from 'react';
import { useModelStore } from '@/stores/model-store';
import { ModelGrid } from '@/components/models/model-grid';
import { ModelFilters } from '@/components/models/model-filters';
import { ModelUploadDialog } from '@/components/models/model-upload-dialog';
import { ModelComparisonDialog } from '@/components/models/model-comparison-dialog';
import { Button } from '@/components/ui/button';
import { useTranslation } from '@/lib/i18n';

export default function ModelsPage() {
  const { models, loading, fetchModels, comparisonIds, clearComparison } = useModelStore();
  const [compareMode, setCompareMode] = useState(false);
  const [showComparison, setShowComparison] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    fetchModels();
  }, [fetchModels]);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">{t('models.title')}</h1>
          <p className="text-muted-foreground">{t('models.subtitle')}</p>
        </div>
        <div className="flex gap-2">
          <Button
            variant={compareMode ? 'secondary' : 'outline'}
            onClick={() => {
              setCompareMode(!compareMode);
              if (compareMode) clearComparison();
            }}
          >
            {compareMode ? t('models.exitCompare') : t('models.compareModels')}
          </Button>
          <ModelUploadDialog />
        </div>
      </div>
      <ModelFilters />
      <ModelGrid models={models} loading={loading} compareMode={compareMode} />

      {comparisonIds.length > 0 && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 rounded-lg border bg-card px-6 py-3 shadow-lg">
          <span className="text-sm font-medium">
            {t('models.comparison.selected', { n: comparisonIds.length })}
          </span>
          <Button
            size="sm"
            disabled={comparisonIds.length < 2}
            onClick={() => setShowComparison(true)}
          >
            {t('models.comparison.compare')}
          </Button>
          <Button size="sm" variant="ghost" onClick={clearComparison}>
            {t('models.comparison.clear')}
          </Button>
        </div>
      )}

      <ModelComparisonDialog
        open={showComparison}
        onOpenChange={setShowComparison}
      />
    </div>
  );
}