#!/usr/bin/env python3
"""Annotate the captured app screenshots with arrows / circles / badges."""
import math
from PIL import Image, ImageDraw, ImageFont

FONT_BOLD = "/usr/share/fonts/open-sans/OpenSans-Bold.ttf"
RED   = (209, 73, 63)
AMBER = (217, 119, 6)
BLUE  = (31, 78, 121)
GREEN = (47, 158, 90)
WHITE = (255, 255, 255)

def font(sz): return ImageFont.truetype(FONT_BOLD, sz)

def load(name, W=1500):
    im = Image.open(f"shots/{name}.png").convert("RGB")
    w, h = im.size
    return im.resize((W, int(h * W / w)), Image.LANCZOS)

def P(im, fx, fy):
    return (int(fx * im.size[0]), int(fy * im.size[1]))

def arrow(d, p1, p2, color=RED, w=7):
    d.line([p1, p2], fill=color, width=w)
    ang = math.atan2(p2[1]-p1[1], p2[0]-p1[0]); L = 26
    for a in (ang+math.radians(155), ang-math.radians(155)):
        d.line([p2, (p2[0]+L*math.cos(a), p2[1]+L*math.sin(a))], fill=color, width=w)

def ellipse(d, c, rx, ry, color=RED, w=7):
    d.ellipse([c[0]-rx, c[1]-ry, c[0]+rx, c[1]+ry], outline=color, width=w)

def rrect(d, box, color=RED, w=7, rad=14):
    d.rounded_rectangle(box, radius=rad, outline=color, width=w)

def badge(d, c, num, color=RED, r=26):
    x, y = c
    d.ellipse([x-r, y-r, x+r, y+r], fill=color, outline=WHITE, width=4)
    f = font(int(r*1.15)); s = str(num)
    tb = d.textbbox((0, 0), s, font=f)
    d.text((x-(tb[2]-tb[0])/2-tb[0], y-(tb[3]-tb[1])/2-tb[1]), s, fill=WHITE, font=f)

def pill(d, anchor, text, color=AMBER, fsz=27, align="left"):
    f = font(fsz); tb = d.textbbox((0, 0), text, font=f)
    tw, th = tb[2]-tb[0], tb[3]-tb[1]; pad = 12
    x, y = anchor
    if align == "right": x -= tw + 2*pad
    if align == "center": x -= (tw + 2*pad)//2
    d.rounded_rectangle([x, y, x+tw+2*pad, y+th+2*pad], radius=9, fill=color)
    d.text((x+pad-tb[0], y+pad-tb[1]), text, fill=WHITE, font=f)
    return (x, y, x+tw+2*pad, y+th+2*pad)

# ---------------------------------------------------------------- Figure 2
def fig2():
    im = load("01-po-list"); d = ImageDraw.Draw(im)
    # highlighted "Purchase Orders" nav (cart icon on the left rail)
    c = P(im, 0.055, 0.213); ellipse(d, c, 46, 34, RED, 7)
    pill(d, P(im, 0.11, 0.20), "Purchase Orders menu", RED)
    # New Purchase Order button (top-right)
    b = P(im, 0.925, 0.092)
    rrect(d, [P(im,0.845,0.072)[0], P(im,0.845,0.072)[1], P(im,0.995,0.112)[0], P(im,0.995,0.112)[1]], RED, 6, 12)
    a1 = P(im, 0.70, 0.16)
    arrow(d, a1, P(im, 0.86, 0.11), RED, 7)
    pill(d, P(im, 0.70, 0.165), "Click to start a new upload", RED)
    # crop to the top portion (header + button + ~13 rows) to avoid a huge blank
    w, h = im.size
    im = im.crop((0, 0, w, int(h * 0.62)))
    im.save("shots/anno-02-list.png"); print("fig2 ok", im.size)

# ---------------------------------------------------------------- Figure 3
def fig3():
    im = load("02-create-empty"); d = ImageDraw.Draw(im)
    badge(d, P(im, 0.268, 0.415), 1)
    badge(d, P(im, 0.505, 0.415), 2)
    badge(d, P(im, 0.740, 0.415), 3)
    badge(d, P(im, 0.255, 0.527), 4)
    badge(d, P(im, 0.245, 0.725), 5)
    # note PO number is auto/greyed
    pill(d, P(im, 0.30, 0.31), "Auto-filled — read only", BLUE)
    arrow(d, P(im, 0.34, 0.345), P(im, 0.37, 0.43), BLUE, 6)
    im.save("shots/anno-03-fields.png"); print("fig3 ok", im.size)

# ---------------------------------------------------------------- Figure 4
def fig4():
    im = load("03-create-filled"); d = ImageDraw.Draw(im)
    rrect(d, [P(im,0.262,0.545)[0], P(im,0.262,0.545)[1], P(im,0.965,0.615)[0], P(im,0.965,0.615)[1]], GREEN, 7, 12)
    pill(d, P(im, 0.262, 0.475), "File attached — upload complete", GREEN)
    arrow(d, P(im, 0.40, 0.52), P(im, 0.45, 0.565), GREEN, 6)
    im.save("shots/anno-04-attached.png"); print("fig4 ok", im.size)

# ---------------------------------------------------------------- Figure 5
def fig5():
    im = load("03-create-filled"); d = ImageDraw.Draw(im)
    # warehouse reminder
    ellipse(d, P(im, 0.61, 0.447), 130, 34, AMBER, 6)
    pill(d, P(im, 0.44, 0.30), "Select a warehouse first", AMBER)
    arrow(d, P(im, 0.55, 0.345), P(im, 0.60, 0.42), AMBER, 6)
    # Create button
    b = [P(im,0.238,0.905)[0], P(im,0.238,0.905)[1], P(im,0.312,0.955)[0], P(im,0.312,0.955)[1]]
    rrect(d, b, RED, 7, 10)
    arrow(d, P(im, 0.42, 0.88), P(im, 0.315, 0.93), RED, 7)
    pill(d, P(im, 0.42, 0.855), "Then press Create", RED)
    im.save("shots/anno-05-submit.png"); print("fig5 ok", im.size)

# ---------------------------------------------------------------- Figure 7
def fig7():
    im = load("04-po-view"); d = ImageDraw.Draw(im)
    y = 0.104
    badge(d, P(im, 0.522, y-0.030), 1, BLUE)      # Get Prices and Dimensions
    badge(d, P(im, 0.787, y-0.030), 2)            # Save Draft (optional)
    # box around Commit button (the final step)
    rrect(d, [P(im,0.815,0.086)[0], P(im,0.815,0.086)[1],
              P(im,0.995,0.124)[0], P(im,0.995,0.124)[1]], GREEN, 7, 12)
    pill(d, P(im, 0.812, 0.040), "Do this last — updates stock", GREEN, align="right")
    arrow(d, P(im, 0.905, 0.058), P(im, 0.905, 0.084), GREEN, 6)
    # circle Draft status
    ellipse(d, P(im, 0.825, 0.222), 48, 24, RED, 6)
    pill(d, P(im, 0.66, 0.20), "Status: Draft", RED)
    # crop to the top portion (action buttons + summary + first item rows)
    w, h = im.size
    im = im.crop((0, 0, w, int(h * 0.46)))
    im.save("shots/anno-07-view.png"); print("fig7 ok", im.size)

fig2(); fig3(); fig4(); fig5(); fig7()
print("ALL DONE")