<template>
    <AppLayout>
        <div class="head">
            <h1 class="title">新建洗车记录</h1>
            <div class="head-actions">
                <button type="button" class="btn btn-ghost" @click="onAiRecognize" :disabled="aiBusy">
                    <span v-if="aiBusy">识别中…</span>
                    <span v-else>📷 AI 识别</span>
                </button>
                <router-link to="/washes" class="btn btn-ghost btn-sm">← 返回</router-link>
            </div>
        </div>

        <AiFallbackModal :show="ai.showFallback" :image-url="ai.fallback?.preview_url" @cancel="ai.cancelFallback()" @confirm="onManualConfirm">
            <div class="grid">
                <div>
                    <label class="label">洗车日期 <span class="text-danger">*</span></label>
                    <input v-model="form.wash_date" type="date" class="input" required />
                </div>
                <div>
                    <label class="label">类型 <span class="text-danger">*</span></label>
                    <select v-model="form.wash_type" class="select" required>
                        <option value="quick">快速（15-30 分钟）</option>
                        <option value="full">标准（30-60 分钟）</option>
                        <option value="detail">精洗（1-2 小时）</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div>
                    <label class="label">车辆</label>
                    <select v-model="form.vehicle_id" class="select">
                        <option value="">不指定</option>
                        <option v-for="v in vehicles" :key="v.id" :value="v.id">{{ v.name }} ({{ v.plate }})</option>
                    </select>
                </div>
                <div>
                    <label class="label">位置</label>
                    <input v-model="form.location" class="input" placeholder="家 / 公司 / 店名" />
                </div>
                <div>
                    <label class="label">花费 <span class="text-danger">*</span></label>
                    <input v-model.number="form.cost" type="number" step="0.01" min="0" class="input" required />
                </div>
            </div>
            <div class="mt-3">
                <label class="label">备注</label>
                <textarea v-model="form.notes" class="input" rows="2" placeholder="看着图填，看不清的留空"></textarea>
            </div>
        </AiFallbackModal>

        <form @submit.prevent="onSubmit" class="card card-pad form">
            <div class="grid">
                <div>
                    <label class="label">洗车日期 <span class="text-danger">*</span></label>
                    <input v-model="form.wash_date" type="date" class="input" required />
                </div>
                <div>
                    <label class="label">类型 <span class="text-danger">*</span></label>
                    <select v-model="form.wash_type" class="select" required>
                        <option value="quick">快速（15-30 分钟）</option>
                        <option value="full">标准（30-60 分钟）</option>
                        <option value="detail">精洗（1-2 小时）</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div>
                    <label class="label">车辆</label>
                    <select v-model="form.vehicle_id" class="select">
                        <option value="">不指定</option>
                        <option v-for="v in vehicles" :key="v.id" :value="v.id">{{ v.name }} ({{ v.plate }})</option>
                    </select>
                </div>
                <div>
                    <label class="label">位置</label>
                    <input v-model="form.location" class="input" placeholder="家 / 公司 / 店名" />
                </div>
                <div>
                    <label class="label">花费 (¥) <span class="text-danger">*</span></label>
                    <input v-model.number="form.cost" type="number" step="0.01" min="0" class="input" required />
                </div>
                <div>
                    <label class="label">耗时 (分钟)</label>
                    <input v-model.number="form.duration_min" type="number" min="0" class="input" />
                </div>
            </div>

            <div class="mt-4">
                <label class="label">备注</label>
                <textarea v-model="form.notes" class="textarea" rows="2" placeholder="可选"></textarea>
            </div>

            <div class="mt-4">
                <label class="label">化学品使用（可选）</label>
                <div class="chem-list">
                    <div v-for="(c, i) in chemRows" :key="i" class="chem-row">
                        <div class="chem-picker-col">
                            <ChemPicker
                                v-model="c.chemical_id"
                                :chemicals="chemicals"
                                :placeholder="availableUnits.length === 0 ? '化学品搜索…' : '搜索化学品（名称/分类）…'"
                                @change="onChemChange(i, $event)"
                            />
                        </div>
                        <div class="chem-amount-col">
                            <select v-model="c.unit" class="select chem-unit" :disabled="!c.chemical_id">
                                <option v-for="u in availableUnits" :key="u.id" :value="u.name">
                                    {{ u.name }}
                                </option>
                            </select>
                            <input v-model.number="c.amount" type="number" step="0.01" min="0" placeholder="用量" class="input chem-amt" :disabled="!c.chemical_id" />
                        </div>
                        <span class="chem-equiv" v-if="c.chemical_id && c.amount > 0">
                            = {{ computedStockAmount(c) }} {{ stockUnit(c) }}
                        </span>
                        <button type="button" class="btn btn-ghost btn-sm del-btn" @click="chemRows.splice(i, 1)">×</button>
                    </div>
                    <button type="button" class="btn btn-ghost btn-sm" @click="chemRows.push({ chemical_id: '', unit: '毫升', amount: 0 })">+ 添加化学品</button>
                </div>
                <p class="text-mute sm mt-2">
                    💡 输入单位可任选（如「0.5 加仑」「100 毫升」），系统自动换算成 Grocy 库存单位（最小精度 = 毫升）。
                    <br>
                    💡 单位换算关系来自 Grocy product 的 <code>userfields.qu_factor</code> 字段（默认 1）。修改去 Grocy 后台 → Master data → Products → Userfields。
                </p>
            </div>

            <p v-if="error" class="error mt-3">{{ error }}</p>

            <div class="actions mt-6">
                <button type="button" class="btn btn-ghost" @click="$router.back()">取消</button>
                <button type="submit" class="btn btn-primary" :disabled="busy">{{ busy ? '保存中…' : '保存' }}</button>
            </div>
        </form>
    </AppLayout>
</template>

<script setup>
import { reactive, ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import AppLayout from '../components/AppLayout.vue';
import ChemPicker from '../components/ChemPicker.vue';
import * as washesApi from '../api/washes';
import * as vehiclesApi from '../api/vehicles';
import * as chemicalsApi from '../api/chemicals';
import { asArray } from '../api/client';
import { useAiRecognize } from '../composables/useAiRecognize';
import { useFormDraft, registerDraftForFlush } from '../utils/formDraft';
import AiFallbackModal from '../components/AiFallbackModal.vue';
const route = useRoute();
const router = useRouter();
const vehicles = ref([]);
const chemicals = ref([]);
const error = ref('');
const busy = ref(false);

// AI 识别（洗车小票/订单截图）
const ai = useAiRecognize();
const aiBusy = ai.busy;
async function onAiRecognize() {
    await ai.open('wash', (data) => {
        if (data.wash_date) form.wash_date = data.wash_date;
        if (data.wash_type) form.wash_type = data.wash_type;
        if (data.cost != null) form.cost = data.cost;
        if (data.location) form.location = data.location;
        if (data.notes) form.notes = (form.notes ? form.notes + '\n' : '') + data.notes;
        // 如果识别出 vehicle_hint，提示给用户（不自动选）
        if (data.vehicle_hint) {
            console.log('AI 识别到车辆线索:', data.vehicle_hint);
        }
    });
}

// AI 兜底 modal 提交：用户对着图手填后，确认。把 modal 关闭
// （form 字段已经双向绑定到 reactive，无需特殊处理）
function onManualConfirm() {
    ai.cancelFallback();
}
const form = reactive({
    wash_date: new Date().toISOString().slice(0, 10),
    wash_type: 'full',
    vehicle_id: '',
    location: '',
    cost: 0,
    duration_min: 0,
    notes: '',
});
const chemRows = ref([]);

// Grocy 的所有 quantity_units（用户能选的单位）
const availableUnits = ref([]);

const chemMap = computed(() => {
    const m = {};
    for (const c of chemicals.value) m[c.grocy_product_id] = c;
    return m;
});

function stockUnit(row) {
    const c = chemMap.value[row.chemical_id];
    return c?.unit || '—';
}

function computedStockAmount(row) {
    const c = chemMap.value[row.chemical_id];
    if (!c) return '—';
    const quFactor = Number(c.qu_factor || 1);
    const v = Number(row.amount || 0) * quFactor;
    // 3 位小数
    return (Math.round(v * 1000) / 1000).toString();
}

function onChemChange(i, ch) {
    // 选中产品后自动设为 stock unit
    const row = chemRows.value[i];
    if (ch?.unit) row.unit = ch.unit;
}

// 表单草稿：401 跳转登录前自动 flush，登录后回原页恢复
const draft = useFormDraft('washes/new');
const restored = draft.load();
if (restored) {
    if (restored.form) Object.assign(form, restored.form);
    if (Array.isArray(restored.chemRows) && restored.chemRows.length) chemRows.value = restored.chemRows;
}
watch([form, chemRows], () => {
    draft.save({ form: { ...form }, chemRows: chemRows.value });
}, { deep: true });
const unregisterFlush = registerDraftForFlush(() => draft.flush());
onBeforeUnmount(() => unregisterFlush());

onMounted(async () => {
    try {
        const r = await vehiclesApi.list({ active: 1 });
        vehicles.value = asArray(r.data, 'vehicles');
    } catch {}
    try {
        const r = await chemicalsApi.all();
        chemicals.value = asArray(r.data, 'chemicals');
    } catch {}
    // 拉 quantity_units 给单位下拉用
    try {
        const r = await fetch('/api/objects/quantity_units', { credentials: 'include' });
        const j = await r.json();
        if (Array.isArray(j)) availableUnits.value = j;
    } catch {}
    // PWA 快捷方式：?capture=1 → 自动唤起相机
    if (route.query.capture === '1' || route.query.capture === 1) {
        setTimeout(() => triggerCamera(), 400);
    }
});

function triggerCamera() {
    // 优先用 hidden 的 file input（无 camera 时回退为普通文件选择）
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.setAttribute('capture', 'environment');
    input.style.display = 'none';
    input.onchange = async (e) => {
        const f = e.target.files?.[0];
        input.remove();
        if (!f) return;
        // 直接走 AI 识别流程（识别后会自动回填本表单）
        try {
            await ai.recognizeFromFile(f, 'wash');
        } catch (err) {
            // 失败时 fallback modal 会自动打开
        }
    };
    document.body.appendChild(input);
    input.click();
}

async function onSubmit() {
    error.value = '';
    busy.value = true;
    try {
        const payload = { ...form };
        if (!payload.vehicle_id) delete payload.vehicle_id;
        const chemicals_ = chemRows.value
            .filter(c => c.chemical_id && c.amount > 0)
            .map(c => ({ chemical_id: c.chemical_id, amount: c.amount, unit: c.unit }));
        if (chemicals_.length) payload.chemicals = chemicals_;
        const r = await washesApi.create(payload);
        draft.clear();
        router.push({ name: 'wash-show', params: { id: r.data?.id || r.data?.row?.id } });
    } catch (e) {
        error.value = e.response?.data?.message || e.response?.data?.code || '保存失败：' + e.message;
    } finally {
        busy.value = false;
    }
}
</script>

<style scoped>
.head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.title { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.form { max-width: 760px; }
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.chem-list { display: flex; flex-direction: column; gap: 8px; }
.chem-row {
    display: flex; gap: 8px; align-items: flex-start;
}
.chem-picker-col { flex: 1; min-width: 0; }
.chem-amount-col { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.chem-unit { width: 80px; font-size: 13px; }
.chem-amt { width: 90px; font-variant-numeric: tabular-nums; }
.chem-equiv { font-size: 12px; color: var(--text-soft); white-space: nowrap; line-height: 36px; flex-shrink: 0; }
.del-btn { flex-shrink: 0; line-height: 36px; }
.mt-2 { margin-top: 8px; }
.error {
    color: var(--danger); background: #FBE3DF; padding: 8px 12px;
    border-radius: var(--radius-sm); font-size: 13px;
}
.actions { display: flex; justify-content: flex-end; gap: 12px; }
@media (max-width: 800px) { .grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 767px) {
    .title { font-size: 20px; }
    .head { flex-direction: column; align-items: stretch; gap: 12px; }
    .head .actions { width: 100%; }
    .head .actions > * { flex: 1; justify-content: center; }
    .grid { grid-template-columns: 1fr; }
    .actions { position: sticky; bottom: 0; padding-top: 12px; background: var(--card); }
    .actions .btn { flex: 1; min-height: 44px; justify-content: center; }
}
</style>
