<template>
  <Section variant="plain">
    <Stack gap="6">
        <Stack gap="2">
          <Stack direction="row" gap="2" wrap>
            <Button :as="'NuxtLink'" :to="localePath('/')" variant="ghost">
              {{ t('supplierFlow.breadcrumb.home') }}
            </Button>
            <Text tone="muted">→</Text>
            <Button :as="'NuxtLink'" :to="localePath('/search')" variant="ghost">
              {{ t('supplierFlow.breadcrumb.search_results') }}
            </Button>
            <Text tone="muted">→</Text>
            <Text weight="semibold">{{ t('supplierFlow.breadcrumb.select_services') }}</Text>
          </Stack>
          <Heading :level="1">{{ supplier?.name }}</Heading>
          <Text tone="muted">📍 {{ supplier?.location }}</Text>
        </Stack>

        <Card padding="lg">
          <Stack direction="row" align="center" justify="between">
            <Stack gap="1">
              <Heading :level="3" weight="semibold">{{ supplier?.name }}</Heading>
              <Text tone="muted">{{ supplier?.selectedLogistics?.route }}</Text>
            </Stack>
            <Stack gap="1" align="end">
              <Text weight="semibold">{{ supplier?.totalPrice }}₽</Text>
              <Text tone="muted">{{ $t('supplier.delivery_time') }}: {{ supplier?.selectedLogistics?.time }}</Text>
            </Stack>
          </Stack>
        </Card>

        <Stack gap="4">
          <Stack gap="2">
            <Heading :level="2">{{ t('supplierFlow.sections.logistics.title') }}</Heading>
            <Text tone="muted">{{ t('supplierFlow.sections.logistics.subtitle') }}</Text>
          </Stack>
          <Grid :cols="1" :md="2" :gap="4">
            <Card
              v-for="logistics in logisticsCompanies"
              :key="logistics.id"
              padding="lg"
              interactive
              :active="selectedServices.logistics === logistics.id"
              @click="selectedServices.logistics = logistics.id"
            >
              <Stack gap="2">
                <Stack direction="row" justify="between" align="center">
                  <Heading :level="4" weight="semibold">{{ logistics.name }}</Heading>
                  <Pill variant="primary">{{ logistics.price.toLocaleString() }}₽</Pill>
                </Stack>
                <Text tone="muted">{{ logistics.description }}</Text>
                <Stack direction="row" justify="between" align="center">
                  <Text tone="muted" size="base">{{ t('supplierFlow.labels.rating_reviews', { rating: logistics.rating, reviews: logistics.reviews }) }}</Text>
                  <Text tone="muted" size="base">{{ logistics.experience }}</Text>
                </Stack>
              </Stack>
            </Card>
          </Grid>
        </Stack>

        <Stack gap="4">
          <Stack gap="2">
            <Heading :level="2">{{ t('supplierFlow.sections.financing.title') }}</Heading>
            <Text tone="muted">{{ t('supplierFlow.sections.financing.subtitle') }}</Text>
          </Stack>
          <Grid :cols="1" :md="2" :gap="4">
            <Card
              v-for="bank in banks"
              :key="bank.id"
              padding="lg"
              interactive
              :active="selectedServices.financing === bank.id"
              @click="selectedServices.financing = bank.id"
            >
              <Stack gap="2">
                <Stack direction="row" justify="between" align="center">
                  <Heading :level="4" weight="semibold">{{ bank.name }}</Heading>
                  <Pill variant="primary">{{ bank.rate }}%</Pill>
                </Stack>
                <Text tone="muted">{{ bank.terms }}</Text>
                <Text tone="muted" size="base">{{ bank.period }}</Text>
              </Stack>
            </Card>
          </Grid>
        </Stack>

        <Stack gap="4">
          <Stack gap="2">
            <Heading :level="2">{{ t('supplierFlow.sections.insurance.title') }}</Heading>
            <Text tone="muted">{{ t('supplierFlow.sections.insurance.subtitle') }}</Text>
          </Stack>
          <Grid :cols="1" :md="2" :gap="4">
            <Card
              v-for="insurance in insuranceCompanies"
              :key="insurance.id"
              padding="lg"
              interactive
              :active="selectedServices.insurance === insurance.id"
              @click="selectedServices.insurance = insurance.id"
            >
              <Stack gap="2">
                <Stack direction="row" justify="between" align="center">
                  <Heading :level="4" weight="semibold">{{ insurance.name }}</Heading>
                  <Pill variant="primary">{{ insurance.cost }}₽</Pill>
                </Stack>
                <Text tone="muted">{{ insurance.coverage }}</Text>
              </Stack>
            </Card>
          </Grid>
        </Stack>

        <Stack gap="4">
          <Stack gap="2">
            <Heading :level="2">{{ t('supplierFlow.sections.quality.title') }}</Heading>
            <Text tone="muted">{{ t('supplierFlow.sections.quality.subtitle') }}</Text>
          </Stack>
          <Grid :cols="1" :md="2" :gap="4">
            <Card
              v-for="lab in laboratories"
              :key="lab.id"
              padding="lg"
              interactive
              :active="selectedServices.laboratory === lab.id"
              @click="selectedServices.laboratory = lab.id"
            >
              <Stack gap="2">
                <Stack direction="row" justify="between" align="center">
                  <Heading :level="4" weight="semibold">{{ lab.name }}</Heading>
                  <Pill variant="primary">{{ lab.price }}₽</Pill>
                </Stack>
                <Text tone="muted">{{ lab.tests }}</Text>
                <Text tone="muted" size="base">🏆 {{ lab.certification }}</Text>
              </Stack>
            </Card>
          </Grid>
        </Stack>

        <Card padding="lg">
          <Stack direction="row" align="center" justify="between">
            <Stack gap="1">
              <Heading :level="3" weight="semibold">{{ $t('supplier.total_summary') }}</Heading>
              <Text tone="muted">{{ $t('supplier.all_services_selected') }}</Text>
            </Stack>
            <Stack gap="1" align="end">
              <Heading :level="2">{{ totalCost }}₽</Heading>
              <Text tone="muted">{{ $t('supplier.final_cost') }}</Text>
            </Stack>
          </Stack>
          <Stack direction="row" gap="3" wrap>
            <Button variant="outline" :as="'NuxtLink'" :to="localePath('/search')">
              {{ $t('supplier.back_to_suppliers') }}
            </Button>
            <Button fullWidth>
              {{ $t('supplier.place_order') }}
            </Button>
          </Stack>
        </Card>
      </Stack>
  </Section>
</template>

<script setup>

const route = useRoute()
const localePath = useLocalePath()
const { t } = useI18n()

const selectedServices = ref({
  logistics: null,
  financing: null,
  insurance: null,
  laboratory: null
})

const logisticsCompanies = [
  {
    id: 1,
    name: "RosLogistic",
    price: 15000,
    description: "National transportation network",
    rating: 4.8,
    reviews: 156,
    experience: "15 years of experience",
    verified: true
  },
  {
    id: 2,
    name: "TransService",
    price: 12000,
    description: "Regional carrier",
    rating: 4.5,
    reviews: 89,
    experience: "8 years of experience",
    verified: false
  }
]

const banks = [
  {
    id: 1,
    name: "VTB",
    rate: 12.5,
    terms: "Loan for raw materials",
    period: "up to 24 months",
    rating: 4.7,
    reviews: 89,
    verified: true
  },
  {
    id: 2,
    name: "Sberbank",
    rate: 13.2,
    terms: "Trade financing",
    period: "up to 18 months",
    rating: 4.9,
    reviews: 145,
    verified: true
  }
]

const insuranceCompanies = [
  {
    id: 1,
    name: "RESO",
    cost: 3500,
    coverage: "Cargo insurance up to 500M ₽",
    rating: 4.6,
    reviews: 67,
    verified: true
  },
  {
    id: 2,
    name: "Ingosstrakh",
    cost: 4200,
    coverage: "Full transaction insurance",
    rating: 4.8,
    reviews: 91,
    verified: true
  }
]

const laboratories = [
  {
    id: 1,
    name: "MetalTest",
    price: 8000,
    tests: "Chemical analysis, mechanical properties",
    certification: "ISO 9001",
    rating: 4.7,
    reviews: 45,
    verified: true
  },
  {
    id: 2,
    name: "QualityControl",
    price: 6500,
    tests: "Basic quality tests",
    certification: "GOST R",
    rating: 4.4,
    reviews: 32,
    verified: false
  }
]

const supplier = computed(() => ({
  id: route.params.id,
  name: "UralMetal",
  location: "Yekaterinburg",
  totalPrice: 180000,
  selectedLogistics: { route: "Auto delivery", time: "5-7 days" }
}))

const totalCost = computed(() => {
  let total = supplier.value.totalPrice
  if (selectedServices.value.logistics) {
    const logistics = logisticsCompanies.find(l => l.id === selectedServices.value.logistics)
    total += logistics?.price || 0
  }
  if (selectedServices.value.insurance) {
    const insurance = insuranceCompanies.find(i => i.id === selectedServices.value.insurance)
    total += insurance?.cost || 0
  }
  if (selectedServices.value.laboratory) {
    const lab = laboratories.find(l => l.id === selectedServices.value.laboratory)
    total += lab?.price || 0
  }
  return total
})
</script>
