'use client'

import { useState, useMemo, useCallback } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { Badge } from '@/components/ui/badge'
import { Loader2 } from 'lucide-react'
import { EvaluationFormBuilder } from '@/components/forms/evaluation-form-builder'
import type { Criterion } from '@/components/forms/evaluation-form-builder'

export type EvaluationCriteriaEditorProps = {
  roundId: string
  perCategoryCriteria?: boolean
}

// ---------------------------------------------------------------------------
// Shared helpers
// ---------------------------------------------------------------------------

function parseCriteria(criteriaJson: unknown): Criterion[] {
  if (!criteriaJson) return []
  return (criteriaJson as Criterion[]).map((c) => {
    const type = c.type || 'numeric'
    if (type === 'numeric' && typeof c.scale === 'string') {
      const parts = (c.scale as string).split('-').map(Number)
      if (parts.length === 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
        return { ...c, type: 'numeric' as const, scale: parts[1], minScore: parts[0], maxScore: parts[1] } as unknown as Criterion
      }
    }
    return { ...c, type } as Criterion
  })
}

function buildUpsertPayload(criteria: Criterion[]) {
  return criteria.map((c) => ({
    id: c.id,
    label: c.label,
    description: c.description,
    type: c.type || 'numeric',
    weight: c.weight,
    scale: typeof c.scale === 'number' ? c.scale : undefined,
    minScore: (c as any).minScore,
    maxScore: (c as any).maxScore,
    required: c.required,
    maxLength: c.maxLength,
    placeholder: c.placeholder,
    trueLabel: c.trueLabel,
    falseLabel: c.falseLabel,
    condition: c.condition,
    sectionId: c.sectionId,
  }))
}

// ---------------------------------------------------------------------------
// Single-category panel (used both standalone and inside tabs)
// ---------------------------------------------------------------------------

function SingleCriteriaPanel({
  roundId,
  category,
}: {
  roundId: string
  category?: 'STARTUP' | 'BUSINESS_CONCEPT'
}) {
  const [pendingCriteria, setPendingCriteria] = useState<Criterion[] | null>(null)
  const utils = trpc.useUtils()

  const { data: form, isLoading } = trpc.evaluation.getForm.useQuery(
    { roundId, category: category ?? null },
    { refetchInterval: 30_000 },
  )

  const upsertMutation = trpc.evaluation.upsertForm.useMutation({
    onSuccess: () => {
      utils.evaluation.getForm.invalidate({ roundId, category: category ?? null })
      toast.success('Evaluation criteria saved')
      setPendingCriteria(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const serverCriteria: Criterion[] = useMemo(
    () => parseCriteria(form?.criteriaJson),
    [form?.criteriaJson],
  )

  const handleChange = useCallback((criteria: Criterion[]) => {
    setPendingCriteria(criteria)
  }, [])

  const handleSave = () => {
    const criteria = pendingCriteria ?? serverCriteria
    const validCriteria = criteria.filter((c) => c.label.trim())
    if (validCriteria.length === 0) {
      toast.error('Add at least one criterion')
      return
    }
    upsertMutation.mutate({
      roundId,
      category: category ?? undefined,
      criteria: buildUpsertPayload(validCriteria),
    })
  }

  return (
    <div>
      <div className="flex items-center justify-end mb-3">
        {form && (
          <span className="text-xs text-muted-foreground mr-auto">
            Version {form.version} &mdash;{' '}
            {(form.criteriaJson as Criterion[]).filter((c) => (c.type || 'numeric') !== 'section_header').length} criteria
          </span>
        )}
        {!form && !isLoading && (
          <span className="text-xs text-muted-foreground mr-auto">
            No criteria defined yet. Add numeric scores, yes/no questions, and text fields.
          </span>
        )}
        {pendingCriteria && (
          <div className="flex items-center gap-2">
            <Button size="sm" variant="outline" onClick={() => setPendingCriteria(null)}>
              Cancel
            </Button>
            <Button size="sm" onClick={handleSave} disabled={upsertMutation.isPending}>
              {upsertMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
              Save Criteria
            </Button>
          </div>
        )}
      </div>
      {isLoading ? (
        <div className="space-y-3">
          {[1, 2, 3].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
        </div>
      ) : (
        <EvaluationFormBuilder
          initialCriteria={serverCriteria}
          onChange={handleChange}
        />
      )}
    </div>
  )
}

// ---------------------------------------------------------------------------
// Main export
// ---------------------------------------------------------------------------

export function EvaluationCriteriaEditor({ roundId, perCategoryCriteria }: EvaluationCriteriaEditorProps) {
  if (!perCategoryCriteria) {
    // Original single-form layout
    return <SingleFormEditor roundId={roundId} />
  }

  // Per-category tabbed layout
  return <TabbedCriteriaEditor roundId={roundId} />
}

// ---------------------------------------------------------------------------
// Single form editor — preserves original Card layout exactly
// ---------------------------------------------------------------------------

function SingleFormEditor({ roundId }: { roundId: string }) {
  const [pendingCriteria, setPendingCriteria] = useState<Criterion[] | null>(null)
  const utils = trpc.useUtils()

  const { data: form, isLoading } = trpc.evaluation.getForm.useQuery(
    { roundId },
    { refetchInterval: 30_000 },
  )

  const upsertMutation = trpc.evaluation.upsertForm.useMutation({
    onSuccess: () => {
      utils.evaluation.getForm.invalidate({ roundId })
      toast.success('Evaluation criteria saved')
      setPendingCriteria(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const serverCriteria: Criterion[] = useMemo(
    () => parseCriteria(form?.criteriaJson),
    [form?.criteriaJson],
  )

  const handleChange = useCallback((criteria: Criterion[]) => {
    setPendingCriteria(criteria)
  }, [])

  const handleSave = () => {
    const criteria = pendingCriteria ?? serverCriteria
    const validCriteria = criteria.filter((c) => c.label.trim())
    if (validCriteria.length === 0) {
      toast.error('Add at least one criterion')
      return
    }
    upsertMutation.mutate({
      roundId,
      criteria: buildUpsertPayload(validCriteria),
    })
  }

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="text-base">Evaluation Criteria</CardTitle>
            <CardDescription>
              {form
                ? `Version ${form.version} \u2014 ${(form.criteriaJson as Criterion[]).filter((c) => (c.type || 'numeric') !== 'section_header').length} criteria`
                : 'No criteria defined yet. Add numeric scores, yes/no questions, and text fields.'}
            </CardDescription>
          </div>
          {pendingCriteria && (
            <div className="flex items-center gap-2">
              <Button size="sm" variant="outline" onClick={() => setPendingCriteria(null)}>
                Cancel
              </Button>
              <Button size="sm" onClick={handleSave} disabled={upsertMutation.isPending}>
                {upsertMutation.isPending && <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />}
                Save Criteria
              </Button>
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => <Skeleton key={i} className="h-16 w-full" />)}
          </div>
        ) : (
          <EvaluationFormBuilder
            initialCriteria={serverCriteria}
            onChange={handleChange}
          />
        )}
      </CardContent>
    </Card>
  )
}

// ---------------------------------------------------------------------------
// Tabbed criteria editor — separate forms per category
// ---------------------------------------------------------------------------

function TabbedCriteriaEditor({ roundId }: { roundId: string }) {
  const { data: startupForm } = trpc.evaluation.getForm.useQuery(
    { roundId, category: 'STARTUP' },
    { refetchInterval: 30_000 },
  )
  const { data: conceptForm } = trpc.evaluation.getForm.useQuery(
    { roundId, category: 'BUSINESS_CONCEPT' },
    { refetchInterval: 30_000 },
  )

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">Evaluation Criteria</CardTitle>
        <CardDescription>
          Separate criteria for each project category. Configure each tab independently.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="STARTUP">
          <TabsList>
            <TabsTrigger value="STARTUP" className="gap-2">
              Startup Criteria
              {!startupForm && (
                <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-300 text-[10px] px-1.5 py-0">
                  No form
                </Badge>
              )}
            </TabsTrigger>
            <TabsTrigger value="BUSINESS_CONCEPT" className="gap-2">
              Business Concept Criteria
              {!conceptForm && (
                <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-300 text-[10px] px-1.5 py-0">
                  No form
                </Badge>
              )}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="STARTUP" className="mt-4">
            <SingleCriteriaPanel roundId={roundId} category="STARTUP" />
          </TabsContent>

          <TabsContent value="BUSINESS_CONCEPT" className="mt-4">
            <SingleCriteriaPanel roundId={roundId} category="BUSINESS_CONCEPT" />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
