'use client'

import { useState } from 'react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { BiddingNoticeEditor } from './bidding-notice-editor'
import { BiddingNoticeTemplate } from '@/db/schema/bidding'
import { biddingNoticeTypeLabels } from '@/db/schema/bidding'

interface BiddingNoticeTemplateManagerProps {
  initialTemplates: Record<string, BiddingNoticeTemplate>
}

export function BiddingNoticeTemplateManager({ initialTemplates }: BiddingNoticeTemplateManagerProps) {
  const [activeTab, setActiveTab] = useState('standard')
  const [templates, setTemplates] = useState(initialTemplates)

  const handleTemplateUpdate = (type: string, template: BiddingNoticeTemplate) => {
    setTemplates(prev => ({
      ...prev,
      [type]: template
    }))
  }

  const templateTypes = [
    { key: 'standard', label: biddingNoticeTypeLabels.standard },
    { key: 'facility', label: biddingNoticeTypeLabels.facility },
    { key: 'unit_price', label: biddingNoticeTypeLabels.unit_price }
  ]

  return (
    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
      <TabsList className="grid w-full grid-cols-3">
        {templateTypes.map(({ key, label }) => (
          <TabsTrigger key={key} value={key}>
            {label}
          </TabsTrigger>
        ))}
      </TabsList>

      {templateTypes.map(({ key, label }) => (
        <TabsContent key={key} value={key}>
          <Card>
            <CardHeader>
              <CardTitle>{label} 입찰공고문 템플릿</CardTitle>
              <CardDescription>
                {label} 타입의 입찰공고문 템플릿을 작성하고 관리할 수 있습니다.
                이 템플릿은 실제 입찰 공고 작성 시 기본 양식으로 사용됩니다.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <BiddingNoticeEditor
                initialData={templates[key]}
                templateType={key}
                onTemplateUpdate={(template) => handleTemplateUpdate(key, template)}
              />
            </CardContent>
          </Card>
        </TabsContent>
      ))}
    </Tabs>
  )
}