/* diary.jsx — Case Diary: matter workspace. Saved research links back to the Ask page. */
const { useState } = React;

const MATTERS = [
  {
    id:"rao", title:"Rao v. Mehta", client:"Anita Rao", role:"For the Licensee",
    court:"Bombay High Court", no:"CS(C) 4412/2025", area:"Civil · Contract",
    status:"Active", next:{ date:"24 Jun", full:"24 June 2026", what:"Reply to interim application" },
    research:[
      { key:"bail", label:"Deposit refund & lock-in obligations", area:"Contract" },
    ],
    hearings:[
      { date:"24 Jun 2026", t:"Interim application — reply due", state:"up" },
      { date:"09 May 2026", t:"Notice issued to respondent", state:"done" },
      { date:"21 Apr 2026", t:"Plaint filed & registered", state:"done" },
    ],
    tasks:[ {t:"Draft reply to IA", done:false}, {t:"Collect deposit receipts", done:true}, {t:"Brief senior counsel", done:false} ],
  },
  {
    id:"kumar", title:"State v. R. Kumar", client:"Rakesh Kumar", role:"For the Accused",
    court:"Delhi High Court", no:"BAIL 1180/2026", area:"Criminal · Bail",
    status:"Urgent", next:{ date:"20 Jun", full:"20 June 2026", what:"Anticipatory bail hearing" },
    research:[
      { key:"bail", label:"Protection from arrest before FIR", area:"Bail" },
    ],
    hearings:[
      { date:"20 Jun 2026", t:"Anticipatory bail — final hearing", state:"up" },
      { date:"12 Jun 2026", t:"Interim protection granted", state:"done" },
      { date:"06 Jun 2026", t:"Application moved u/s 482 BNSS", state:"done" },
    ],
    tasks:[ {t:"Compile antecedents", done:true}, {t:"Cite Sushila Aggarwal on duration", done:false} ],
  },
  {
    id:"sharma", title:"Sharma — FIR quashing", client:"Vikram Sharma", role:"For the Petitioner",
    court:"Punjab & Haryana HC", no:"CRM-M 9021/2026", area:"Criminal · Procedure",
    status:"Active", next:{ date:"02 Jul", full:"2 July 2026", what:"Admission hearing" },
    research:[
      { key:"fir", label:"When is FIR registration mandatory", area:"Procedure" },
    ],
    hearings:[
      { date:"02 Jul 2026", t:"Admission hearing", state:"up" },
      { date:"28 May 2026", t:"Petition filed u/s 528 BNSS", state:"done" },
    ],
    tasks:[ {t:"Apply Bhajan Lal categories to facts", done:false} ],
  },
];

function DiaryApp(){
  const [sel,setSel]=useState(MATTERS[1].id);
  // Task "done" state lives in the component so the checklist is interactive
  // (seeded from the sample data; in production this round-trips to /api).
  const [doneMap,setDoneMap]=useState(()=>{
    const o={}; MATTERS.forEach(x=>{ o[x.id]=x.tasks.map(t=>!!t.done); }); return o;
  });
  const m=MATTERS.find(x=>x.id===sel);
  function toggleTask(i){
    setDoneMap(prev=>{ const cur=(prev[sel]||[]).slice(); cur[i]=!cur[i]; return { ...prev, [sel]:cur }; });
  }
  return (
    <div className="scroll">
      <div className="diary-split">
        {/* matter list */}
        <aside className="matters">
          <div className="matters-head">
            <h3>Matters <span className="mono">{MATTERS.length}</span></h3>
            <button className="btn btn-ghost" style={{padding:"6px 10px"}}><Icon name="plus" style={{width:14,height:14}}/></button>
          </div>
          {MATTERS.map(x=>(
            <button key={x.id} className={"matter"+(x.id===sel?" on":"")} onClick={()=>setSel(x.id)}>
              <div className="matter-top">
                <span className="matter-title">{x.title}</span>
                <span className={"matter-st "+(x.status==="Urgent"?"urg":"act")}>{x.status}</span>
              </div>
              <div className="matter-meta mono">{x.court}</div>
              <div className="matter-next">
                <Icon name="clock" style={{width:13,height:13}}/> Next: <b>{x.next.date}</b> · {x.next.what}
              </div>
            </button>
          ))}
        </aside>

        {/* matter detail */}
        <div className="matter-detail">
          <div className="md-head">
            <div className="md-meta">
              <span className="pill brand">{m.area}</span>
              <span className="pill mono">{m.no}</span>
              <span className={"matter-st "+(m.status==="Urgent"?"urg":"act")}>{m.status}</span>
            </div>
            <h2 className="md-title">{m.title}</h2>
            <div className="md-sub">{m.role} · {m.client} · {m.court}</div>
          </div>

          <div className="md-next">
            <div className="mn-date"><span className="mn-d">{m.next.date.split(" ")[0]}</span><span className="mn-mo mono">{m.next.date.split(" ")[1]}</span></div>
            <div><div className="mn-w">Next hearing — {m.next.what}</div><div className="mn-f mono">{m.next.full}</div></div>
            <button className="btn btn-primary" style={{marginLeft:"auto"}}>Prepare <Icon name="arrow"/></button>
          </div>

          <div className="md-cols">
            <div className="md-col">
              <div className="md-col-h">Hearings</div>
              <div className="timeline">
                {m.hearings.map((h,i)=>(
                  <div className={"tl-item "+h.state} key={i}>
                    <span className="tl-dot"/>
                    <div className="tl-tx"><div className="tl-t">{h.t}</div><div className="tl-d mono">{h.date}</div></div>
                  </div>
                ))}
              </div>

              <div className="md-col-h" style={{marginTop:22}}>Tasks</div>
              <div className="tasks">
                {m.tasks.map((t,i)=>{
                  const done=(doneMap[sel]||[])[i];
                  return (
                    <button type="button" className={"task"+(done?" done":"")} key={i} onClick={()=>toggleTask(i)}>
                      <span className="tk-box">{done&&<Icon name="check" style={{width:12,height:12}}/>}</span>{t.t}
                    </button>
                  );
                })}
              </div>
            </div>

            <div className="md-col">
              <div className="md-col-h">Saved research</div>
              <div className="saved-list">
                {m.research.map((r,i)=>(
                  <a className="saved" key={i} href={PAGES.ask+"?q="+r.key}>
                    <span className="saved-ic"><Icon name="ask"/></span>
                    <div style={{flex:1,minWidth:0}}>
                      <div className="saved-t">{r.label}</div>
                      <div className="saved-m mono">{r.area} · verified authorities attached</div>
                    </div>
                    <Icon name="arrow" style={{width:15,height:15,color:"var(--ink-3)"}}/>
                  </a>
                ))}
                <a className="saved add" href={PAGES.ask}>
                  <span className="saved-ic add"><Icon name="plus"/></span>
                  <div className="saved-t" style={{color:"var(--ink-2)"}}>Research a new question for this matter</div>
                </a>
              </div>
            </div>
          </div>
          <div className="result-foot mono">Research saved to a matter keeps its verified Indian Kanoon authorities attached for hearing prep.</div>
        </div>
      </div>
    </div>
  );
}
window.DiaryApp = DiaryApp;