'use client';

import { useState } from 'react';
import { Wrench } from 'lucide-react';

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import type { TicketDetail } from '@/types';

import { RepairEvidenceForm } from './RepairEvidenceForm';
import { TicketExtensionRequestPanel } from './TicketExtensionRequestPanel';
import { TicketActionCard } from './TicketActionCard';

type RepairActionTab = 'repair-proof' | 'request-extension';

export function SubmitRepairAction({ ticket }: { ticket: TicketDetail }) {
  const [activeTab, setActiveTab] = useState<RepairActionTab>('repair-proof');

  if (ticket.repair?.submitted_at) {
    return null;
  }

  return (
    <TicketActionCard icon={Wrench} title="Repair Proof">
      <Tabs
        value={activeTab}
        onValueChange={(value) => setActiveTab(value as RepairActionTab)}
        className="gap-5"
      >
        <TabsList variant="line" className="grid h-auto w-full grid-cols-2 p-0">
          <TabsTrigger value="repair-proof" className="pb-3">
            Upload Repair Proof
          </TabsTrigger>
          <TabsTrigger value="request-extension" className="pb-3">
            Request Extension
          </TabsTrigger>
        </TabsList>
        <TabsContent value="repair-proof">
          <RepairEvidenceForm
            ticketId={ticket.id}
            defectClass={ticket.defect_class}
          />
        </TabsContent>
        <TabsContent value="request-extension">
          <TicketExtensionRequestPanel
            ticket={ticket}
            onCancelRequest={() => setActiveTab('repair-proof')}
          />
        </TabsContent>
      </Tabs>
    </TicketActionCard>
  );
}