"use client";

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Upload, FileText, Database, BarChart3, CheckCircle } from 'lucide-react';
import { UploadForm } from '@/app/components/uploadForm';

interface FileData {
  id: string;
  filename: string;
  mimetype: string;
  size: number;
  createdAt: string;
  updatedAt: string;
}

export default function CintasCalendarSummaryPage() {
  const [currentStep, setCurrentStep] = useState(1);
  const [uploadedFile, setUploadedFile] = useState<FileData | null>(null);
  const [isProcessing, setIsProcessing] = useState(false);

  const handleFileUploaded = (file: FileData) => {
    setUploadedFile(file);
    setCurrentStep(2);
  };

  const steps = [
    {
      id: 1,
      title: 'Upload Excel File',
      description: 'Upload the Cintas Install Calendar Excel file to blob storage',
      icon: Upload,
      status: currentStep >= 1 ? 'completed' : 'pending',
    },
    {
      id: 2,
      title: 'Create Import Record',
      description: 'Create an import record with Cintas Install Calendar layout configuration',
      icon: FileText,
      status: currentStep >= 2 ? 'pending' : 'disabled',
    },
    {
      id: 3,
      title: 'Import Data',
      description: 'Read the Excel file and import data into PostgreSQL database',
      icon: Database,
      status: currentStep >= 3 ? 'pending' : 'disabled',
    },
    {
      id: 4,
      title: 'Generate Summary',
      description: 'Run summary calculation and display results',
      icon: BarChart3,
      status: currentStep >= 4 ? 'pending' : 'disabled',
    },
  ];

  const getStepStatusColor = (status: string) => {
    switch (status) {
      case 'completed':
        return 'text-green-600 bg-green-50 border-green-200';
      case 'pending':
        return 'text-blue-600 bg-blue-50 border-blue-200';
      case 'disabled':
        return 'text-gray-400 bg-gray-50 border-gray-200';
      default:
        return 'text-gray-600 bg-gray-50 border-gray-200';
    }
  };

  return (
    <div className="container mx-auto py-6 px-4 max-w-6xl">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">Cintas Install Calendar Summary</h1>
        <p className="text-muted-foreground">
          Follow the workflow steps to upload and process the installation calendar data
        </p>
      </div>

      {/* Workflow Steps */}
      <div className="mb-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {steps.map((step) => {
            const Icon = step.icon;
            return (
              <Card
                key={step.id}
                className={`border-2 ${getStepStatusColor(step.status)}`}
              >
                <CardHeader className="pb-3">
                  <div className="flex items-center space-x-2">
                    <Icon className="h-5 w-5" />
                    <CardTitle className="text-sm font-medium">
                      Step {step.id}: {step.title}
                    </CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-xs">
                    {step.description}
                  </CardDescription>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </div>

      {/* Step Content */}
      <div className="grid gap-6">
        {currentStep === 1 && (
          <Card>
            <CardHeader>
              <CardTitle>Step 1: Upload Excel File</CardTitle>
              <CardDescription>
                Upload your Cintas Install Calendar Excel file to begin processing
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <UploadForm onFileUploaded={handleFileUploaded} />
                
                {uploadedFile && (
                  <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                    <div className="flex items-center space-x-2">
                      <CheckCircle className="h-5 w-5 text-green-600" />
                      <div>
                        <p className="text-sm font-medium text-green-800">File uploaded successfully!</p>
                        <p className="text-sm text-green-600">
                          {uploadedFile.filename} ({(uploadedFile.size / 1024 / 1024).toFixed(2)} MB)
                        </p>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        )}

        {currentStep === 2 && (
          <Card>
            <CardHeader>
              <CardTitle>Step 2: Create Import Record</CardTitle>
              <CardDescription>
                Creating import record with Cintas Install Calendar layout configuration
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-center py-8">
                  <div className="text-center">
                    <FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-muted-foreground">
                      Import record creation functionality coming soon...
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {currentStep === 3 && (
          <Card>
            <CardHeader>
              <CardTitle>Step 3: Import Data</CardTitle>
              <CardDescription>
                Processing Excel file and importing data into database
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-center py-8">
                <div className="text-center">
                  <Database className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-muted-foreground">
                    Data import functionality coming soon...
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {currentStep === 4 && (
          <Card>
            <CardHeader>
              <CardTitle>Step 4: Generate Summary</CardTitle>
              <CardDescription>
                Running summary calculations and displaying results
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center justify-center py-8">
                <div className="text-center">
                  <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                  <p className="text-muted-foreground">
                    Summary generation functionality coming soon...
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Navigation */}
        <div className="flex justify-between">
          <Button
            variant="outline"
            onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}
            disabled={currentStep === 1}
          >
            Previous
          </Button>
          <Button
            onClick={() => setCurrentStep(Math.min(4, currentStep + 1))}
            disabled={currentStep === 4 || !uploadedFile}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}