'use client';
import { useState } from 'react';
import { Shield, AlertTriangle, Info } from 'lucide-react';
import { useNavigation } from '@/lib/navigation';
import { Button } from '@/components/ui/button';
import { BackButton } from '@/components/common/BackButton';
const RL:Record<number,{l:string;c:string}>={1:{l:'ต่ำมาก',c:'bg-green-500/20 text-green-700 border-green-500/30'},2:{l:'ต่ำ',c:'bg-green-500/15 text-green-600 border-green-500/25'},3:{l:'ปานกลาง',c:'bg-yellow-500/20 text-yellow-700 border-yellow-500/30'},4:{l:'สูง',c:'bg-orange-500/20 text-orange-700 border-orange-500/30'},5:{l:'วิกฤต',c:'bg-red-500/20 text-red-700 border-red-500/30'}};
const SC:Record<string,{t:string;d:string;law:string}>={'2-3':{t:'เลิกจ้างทดลองงาน',d:'ก่อนครบ 120 วัน ไม่ต้องชดเชย',law:'มาตรา 118'},'3-3':{t:'เลิกจ้างตามอายุงาน',d:'ต้องจ่ายค่าชดเชย+บอกกล่าว',law:'มาตรา 118'},'4-4':{t:'เลิกจ้างไม่เป็นธรรม',d:'ลูกจ้างอาจฟ้องศาลแรงงาน',law:'มาตรา 49'},'5-5':{t:'เลิกจ้างป้องกันสิทธิ',d:'ฟ้องเรียกค่าเสียหาย+ชดเชยพิเศษ',law:'มาตรา 118,119'},'3-5':{t:'ลดค่าจ้างฝ่ายเดียว',d:'ผิดมาตรา 53',law:'มาตรา 53'},'5-3':{t:'ย้ายตำแหน่งกลั่นแกล้ง',d:'เลิกจ้างโดยอ้อม',law:'ฎีกา 2566/9876'},'4-5':{t:'หักเงินเดือนเป็นค่าปรับ',d:'ผิดมาตรา 54',law:'มาตรา 54'}};
const LK=['ไม่น่าเกิด','เกิดน้อย','ปานกลาง','น่าจะเกิด','เกิดแน่'];const IM=['กระทบน้อย','ปานกลาง','กระทบมาก','ร้ายแรง','วิกฤต'];
export function RiskMatrixView(){const{navigate}=useNavigation();const[sel,setSel]=useState<string|null>(null);const gl=(l:number,i:number)=>{const s=l+i;if(s<=3){return 1;}if(s<=5){return 2;}if(s<=7){return 3;}if(s<=9){return 4;}return 5;};
return(<div className="mx-auto max-w-5xl px-4 sm:px-6 py-8"><BackButton label="ย้อนกลับ" /><div className="flex items-center gap-2 mb-2"><Shield className="h-6 w-6 text-gold"/><h1 className="text-2xl sm:text-3xl font-bold">Risk Matrix ฝั่งนายจ้าง</h1></div><p className="text-sm text-muted-foreground mb-6">ประเมินความเสี่ยงทางกฎหมายแรงงาน 5×5 — คลิกช่องเพื่อดูสถานการณ์</p>
<div className="card-premium rounded-xl p-6 mb-6"><div className="flex"><div className="flex items-center -rotate-90 whitespace-nowrap text-xs font-semibold text-muted-foreground mr-2" style={{minWidth:'16px'}}>ความรุนแรง →</div><div className="flex-1"><div className="grid grid-cols-[auto_repeat(5,1fr)] gap-1"><div/>{IM.map((l)=><div key={l} className="text-center text-[10px] text-muted-foreground pb-1">{l}</div>)}{[5,4,3,2,1].map(lik=>(<div key={lik} className="contents"><div className="flex items-center text-[10px] text-muted-foreground pr-2 whitespace-nowrap">{LK[lik-1]}</div>{[1,2,3,4,5].map(imp=>{const lv=gl(lik,imp);const k=`${lik}-${imp}`;const sc=SC[k];const r=RL[lv];return(<button type="button" key={k} onClick={()=>setSel(sel===k?null:k)} className={`h-20 rounded-lg border transition-all cursor-pointer flex flex-col items-center justify-center p-1 text-center ${r.c} ${sel===k?'ring-2 ring-gold scale-105':'hover:scale-105'}`}><span className="text-[9px] font-bold uppercase">{r.l}</span>{sc&&<span className="text-[8px] mt-0.5 line-clamp-2 opacity-80">{sc.t}</span>}</button>);})}</div>))}</div><div className="text-center text-xs font-semibold text-muted-foreground mt-2">โอกาสเกิด →</div></div></div></div>
{sel&&SC[sel]&&(<div className="card-premium rounded-xl p-6"><div className="flex items-start gap-3 mb-4"><AlertTriangle className="h-5 w-5 text-orange-500 flex-shrink-0 mt-0.5"/><div><h2 className="text-lg font-semibold">{SC[sel].t}</h2><p className="text-sm text-muted-foreground mt-1">{SC[sel].d}</p></div></div><div className="flex items-center gap-2 pt-4 border-t border-border/40"><Info className="h-4 w-4 text-gold"/><span className="text-sm font-medium text-gold">อ้างอิง: {SC[sel].law}</span></div><Button onClick={()=>navigate({name:'ask'})} className="mt-4 bg-navy text-white gap-2">ถาม AI เพิ่มเติม</Button></div>)}
<div className="flex flex-wrap gap-3 mt-6">{Object.entries(RL).map(([k,v])=><div key={k} className={`px-3 py-1.5 rounded-lg border text-xs font-medium ${v.c}`}>{v.l}</div>)}</div></div>);}