'use client'

import { useState } from 'react'
import { createClient } from '@/lib/supabase/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Badge } from '@/components/ui/badge'
import { Plus, Pencil, Trash2, Package, Loader2 } from 'lucide-react'
import { toast } from 'sonner'
import type { MaterialWithStock } from '@/lib/supabase/types'
import { formatMNT } from '@/lib/format'

const UNITS = ['гр', 'кг', 'мл', 'л', 'ш', 'хайрцаг', 'уут']

type Form = {
  name: string
  unit: string
  price_per_unit: string
  current_stock: string
  min_stock: string
}

const emptyForm: Form = {
  name: '',
  unit: 'гр',
  price_per_unit: '',
  current_stock: '',
  min_stock: '',
}

export function MaterialsClient({
  orgId,
  branchId,
  initialMaterials,
}: {
  orgId: string
  branchId: string
  initialMaterials: MaterialWithStock[]
}) {
  const [materials, setMaterials] = useState(initialMaterials)
  const [open, setOpen] = useState(false)
  const [form, setForm] = useState<Form>(emptyForm)
  const [editing, setEditing] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)
  const [search, setSearch] = useState('')

  const supabase = createClient()

  function openNew() {
    setEditing(null)
    setForm(emptyForm)
    setOpen(true)
  }

  function openEdit(m: MaterialWithStock) {
    setEditing(m.id)
    setForm({
      name: m.name,
      unit: m.unit,
      price_per_unit: String(m.price_per_unit),
      current_stock: String(m.current_stock),
      min_stock: String(m.min_stock),
    })
    setOpen(true)
  }

  async function handleSave() {
    if (!form.name || !form.price_per_unit) {
      toast.error('Нэр болон үнэ заавал оруулна уу')
      return
    }
    setSaving(true)

    const payload = {
      name: form.name.trim(),
      unit: form.unit,
      price_per_unit: Number(form.price_per_unit),
      current_stock: Number(form.current_stock) || 0,
      min_stock: Number(form.min_stock) || 0,
    }

    if (editing) {
      const { data: updatedMat, error: matErr } = await supabase
        .from('raw_materials')
        .update({ name: payload.name, unit: payload.unit, price_per_unit: payload.price_per_unit })
        .eq('id', editing)
        .select()
        .single()
      if (matErr) { toast.error(matErr.message); setSaving(false); return }

      const { data: updatedStock, error: stockErr } = await supabase
        .from('branch_stock')
        .upsert(
          { branch_id: branchId, material_id: editing, current_stock: payload.current_stock, min_stock: payload.min_stock },
          { onConflict: 'branch_id,material_id' }
        )
        .select()
        .single()
      if (stockErr) { toast.error(stockErr.message); setSaving(false); return }

      setMaterials(prev => prev.map(m => m.id === editing ? {
        ...m,
        name: updatedMat.name,
        unit: updatedMat.unit,
        price_per_unit: updatedMat.price_per_unit,
        stock_id: updatedStock?.id ?? m.stock_id,
        current_stock: updatedStock?.current_stock ?? m.current_stock,
        min_stock: updatedStock?.min_stock ?? m.min_stock,
      } : m))
      toast.success('Амжилттай шинэчлэгдлээ')
    } else {
      const { data: mat, error: matErr } = await supabase
        .from('raw_materials')
        .insert({ org_id: orgId, name: payload.name, unit: payload.unit, price_per_unit: payload.price_per_unit })
        .select()
        .single()
      if (matErr) { toast.error(matErr.message); setSaving(false); return }

      // Create branch_stock for ALL branches (entered stock for current, 0 for others)
      const { data: allBranches } = await supabase
        .from('branches')
        .select('id')
        .eq('org_id', orgId)

      const stockInserts = (allBranches ?? []).map(b => ({
        branch_id: b.id,
        material_id: mat.id,
        current_stock: b.id === branchId ? payload.current_stock : 0,
        min_stock: b.id === branchId ? payload.min_stock : 0,
      }))

      const { data: insertedStocks, error: stockErr } = await supabase
        .from('branch_stock')
        .insert(stockInserts)
        .select()
      if (stockErr) { toast.error(stockErr.message); setSaving(false); return }

      const myStock = insertedStocks?.find(s => s.branch_id === branchId)
      setMaterials(prev => [...prev, {
        id: mat.id,
        org_id: mat.org_id,
        name: mat.name,
        unit: mat.unit,
        price_per_unit: mat.price_per_unit,
        created_at: mat.created_at,
        stock_id: myStock?.id ?? null,
        current_stock: myStock?.current_stock ?? 0,
        min_stock: myStock?.min_stock ?? 0,
      }])
      toast.success('Түүхий эд нэмэгдлээ')
    }

    setSaving(false)
    setOpen(false)
  }

  async function handleDelete(id: string) {
    if (!confirm('Устгах уу? Шилжүүлэлтийн түүхтэй материалыг устгах боломжгүй.')) return
    const { error } = await supabase.from('raw_materials').delete().eq('id', id)
    if (error) { toast.error(error.message); return }
    setMaterials(prev => prev.filter(m => m.id !== id))
    toast.success('Устгагдлаа')
  }

  const filtered = materials.filter(m =>
    m.name.toLowerCase().includes(search.toLowerCase())
  )

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Түүхий эд</h1>
          <p className="text-gray-500 text-sm mt-1">Нийт {materials.length} түүхий эд</p>
        </div>
        <Button onClick={openNew} className="bg-amber-600 hover:bg-amber-700">
          <Plus className="h-4 w-4 mr-2" /> Нэмэх
        </Button>
      </div>

      <Input
        placeholder="Хайх..."
        value={search}
        onChange={e => setSearch(e.target.value)}
        className="max-w-xs"
      />

      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead>Нэр</TableHead>
              <TableHead>Нэгж</TableHead>
              <TableHead className="text-right">Нэгжийн үнэ</TableHead>
              <TableHead className="text-right">Одоогийн нөөц</TableHead>
              <TableHead className="text-right">Доод хэмжээ</TableHead>
              <TableHead>Төлөв</TableHead>
              <TableHead className="text-right">Үйлдэл</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filtered.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-12 text-gray-400">
                  <Package className="h-10 w-10 mx-auto mb-2 opacity-30" />
                  Түүхий эд олдсонгүй
                </TableCell>
              </TableRow>
            ) : (
              filtered.map(m => {
                const low = m.current_stock <= m.min_stock
                return (
                  <TableRow key={m.id} className="hover:bg-gray-50">
                    <TableCell className="font-medium">{m.name}</TableCell>
                    <TableCell className="text-gray-500">{m.unit}</TableCell>
                    <TableCell className="text-right">{formatMNT(m.price_per_unit)}</TableCell>
                    <TableCell className="text-right font-medium">
                      {m.current_stock} {m.unit}
                    </TableCell>
                    <TableCell className="text-right text-gray-400">
                      {m.min_stock} {m.unit}
                    </TableCell>
                    <TableCell>
                      {low ? (
                        <Badge variant="destructive" className="text-xs">Дутуу</Badge>
                      ) : (
                        <Badge variant="secondary" className="text-xs bg-green-100 text-green-700">Хангалттай</Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex gap-1 justify-end">
                        <Button variant="ghost" size="sm" onClick={() => openEdit(m)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
                          onClick={() => handleDelete(m.id)}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                )
              })
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>{editing ? 'Засах' : 'Шинэ түүхий эд нэмэх'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label>Нэр</Label>
              <Input
                placeholder="Жишээ: Кофе буурцаг"
                value={form.name}
                onChange={e => setForm(p => ({ ...p, name: e.target.value }))}
              />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>Хэмжих нэгж</Label>
                <Select value={form.unit} onValueChange={v => v && setForm(p => ({ ...p, unit: v }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {UNITS.map(u => (
                      <SelectItem key={u} value={u}>{u}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label>Нэгжийн үнэ (₮)</Label>
                <Input
                  type="number"
                  placeholder="0"
                  value={form.price_per_unit}
                  onChange={e => setForm(p => ({ ...p, price_per_unit: e.target.value }))}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1.5">
                <Label>Одоогийн нөөц</Label>
                <Input
                  type="number"
                  placeholder="0"
                  value={form.current_stock}
                  onChange={e => setForm(p => ({ ...p, current_stock: e.target.value }))}
                />
              </div>
              <div className="space-y-1.5">
                <Label>Доод хэмжээ (сэрэмжлүүлэг)</Label>
                <Input
                  type="number"
                  placeholder="0"
                  value={form.min_stock}
                  onChange={e => setForm(p => ({ ...p, min_stock: e.target.value }))}
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>Цуцлах</Button>
            <Button
              className="bg-amber-600 hover:bg-amber-700"
              onClick={handleSave}
              disabled={saving}
            >
              {saving ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
              Хадгалах
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}